JavaScript:
Analisando HTML

Como fazer:

Vamos analisar HTML usando a API DOMParser em JavaScript.

const parser = new DOMParser();
const htmlString = `<p>Olá, mundo!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // Saída: Olá, mundo!

Agora, vamos pegar algo mais específico, como um elemento com uma classe:

const htmlString = `<div><p class="greeting">Olá, novamente!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // Saída: Olá, novamente!

Mergulho Profundo

Analisar HTML é tão antigo quanto a web. Inicialmente, era uma coisa dos navegadores—navegadores analisavam HTML para exibir páginas da web. Com o tempo, os programadores queriam explorar esse processo, levando a APIs como DOMParser.

Alternativas? Claro. Temos bibliotecas como jQuery e ferramentas como BeautifulSoup para Python. Mas o DOMParser nativo do JavaScript é rápido e já vem embutido, sem necessidade de bibliotecas extras.

Em termos de implementação, quando você analisa HTML com DOMParser, ele cria um objeto Document. Pense nisso como um modelo hierárquico do seu HTML. Uma vez que você o tem, você pode navegar e manipular como faria com o DOM de uma página da web normal.

Aqui está a coisa—o processo de análise pode tropeçar em HTML malformado. Os navegadores são tolerantes, mas o DOMParser pode não ser. Portanto, para tarefas complexas ou HTML bagunçado, bibliotecas de terceiros podem fazer um trabalho de limpeza melhor.

Veja Também

  • Documentação da MDN sobre a API DOMParser: MDN DOMParser
  • Capacidades de análise do jQuery: jQuery.parseHTML()
  • Cheerio, uma implementação rápida, flexível e enxuta do núcleo do jQuery para o servidor: Cheerio.js
  • Para análise fora do JS: Biblioteca BeautifulSoup do Python: Beautiful Soup