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.

Como converter uma String em objeto HTML (DOM)?

Uma resposta para “Como converter uma String em objeto HTML (DOM)?”

Deixe um comentário Cancelar resposta