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.
