Como extrair um e-mail de uma String

Para extrair e-mails de uma string com JavaScript, ou qualquer outra linguagem, pode ser uma tarefa bem extensa devido a diversas conferencias que precisariam ser feitas para saber se aquele trecho é um e-mail

Por exemplo, você poderia ter algo do tipo:

let text = '@rediffmail.com blablabla farkal@gmail.com teste@@@ rodnsdfald ferdfnson <rfernsdfson@gmal.com> Affdmdol Gondfgale gyfanamosl@gmail.comtruform techno pidfpinfg@truformdftechnoproducts.com "NiTsdfeSh ThIdfsKaRe"';

let listaPalavras = text.split(" ");

let listaEmails = [];

listaPalavras.forEach((palavra) =>{
    if(palavra.includes("@")){
        listaEmails.push(palavra);
    }
});

console.log(listaEmails);

Poderíamos ter uma lista de e-mails filtrada com base no @. Mas dai você pode se perguntar se “@Joao” entre outras possíveis variações tanto devido ao conteúdo do texto quanto a possíveis erros de digitação. Com isso podemos acabar tendo um código como o abaixo:

let text = '@rediffmail.com blablabla farkal@gmail.com teste@@@ rodnsdfald ferdfnson <rfernsdfson@gmal.com> Affdmdol Gondfgale gyfanamosl@gmail.comtruform techno pidfpinfg@truformdftechnoproducts.com "NiTsdfeSh ThIdfsKaRe"';

let listaPalavras = text.split(" ");

let listaEmails = [];

listaPalavras.forEach((palavra) =>{
    if(palavra.includes("@") 
        && palavra[0] != "@" 
        && palavra.includes(".co")
        && palavra.includes(palavra.substr(0, palavra.indexOf("@"))) != "!"){
        listaEmails.push(palavra);
    }
});

console.log(listaEmails);

E isso é só o começo, estre IF teria que ser muito maior.

Mas existe uma solução usando REGEX (conheça o Regex aqui) que faz diversas conferencias ao mesmo tempo e permite a extração em poucas linhas. Veja o exemplo:

let text = '@rediffmail.com blablabla farkal@gmail.com teste@@@ rodnsdfald ferdfnson <rfernsdfson@gmal.com> Affdmdol Gondfgale gyfanamosl@gmail.comtruform techno pidfpinfg@truformdftechnoproducts.com "NiTsdfeSh ThIdfsKaRe"';

let listaEmails = text.match(/([a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9._-]+)/gi);

console.log(listaEmails);

Espero que este snippet ajude mais alguém como me ajudou. Deixe sua duvida ou comentário na sessão abaixo caso você tenha notado algo que possa melhorar ou caso esses snippet ajudou você

Como converter uma String em objeto HTML (DOM)?

Recentemente tive que trabalhar com a alimentação de dados vindos do servidor que guardavam dados HTML em formato String.

Para caso em que em bastava colar a resposta na tela, basta que se use o innerHTML que já deve ser conhecido por todos

let umTexto = "<h1>Titutlo</h1><p>Texto</p><p>Texto</p>";

document.geElementById("idDoObjeto").innerHTML = umTexto;

No entanto, dificilmente algo é tão simples quanto isso e esse no meu problema isso não era uma excessão. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Acima seria o perfeito, mas na verdade vem assim e no formato String:

let stringResultado = '<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr><tr> <td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr><tr> <td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </tr></table> </td></tr><tr> <td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr> <td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr></table></body></html>';

De toda forma, apenas os itens dentro da table com class=“subtabela” precisavam ser listados e exibidos. Para alcançar isso, após pesquisa, descobri que o JavaScript possui uma classe muito útil chamada de DomParser.

let parser = new DOMParser();
let doc = parser.parseFromString(stringContendoHTML, "text/html");

Com isso, foi possível transformar o resultado da seguinte forma e manipular o objeto da mesma forma como se manipula o DOM. Podendo acessar elementos por Id, classe, etc…

let doc = new DOMParser().parseFromString(stringResultado, "text/html");

let subtabelas = doc.getElementsByClassName("subtabela");

for(let i = 0; i < subtabelas.length; i++){
    console.log("Tabela " + (i+1));
    console.log(subtabelas[i].innerText);
    console.log("------------------");
}

Espero que isso ajude outras pessoas. Qualquer coisa, deixe um recado aqui nos comentários.