Parsing de HTML em JavaScript (Node.js)

Parsing de HTML em JavaScript (Node.js): guia completo

O parsing de HTML é uma das habilidades essenciais do desenvolvedor web moderno. No ecossistema Node.js, existem várias ferramentas poderosas para extrair dados de documentos HTML. Neste artigo, analisaremos detalhadamente três bibliotecas principais: Cheerio, JSDOM e Puppeteer, e aprenderemos a escolher a ferramenta adequada para cada tarefa específica.

1. Cheerio — parser leve e rápido

Cheerio é uma biblioteca rápida, flexível e leve que implementa um subconjunto do jQuery para o lado do servidor. É ideal para parsing de HTML estático, quando não é necessária a execução de JavaScript na página.

Instalação

npm install cheerio

Exemplo de uso

const cheerio = require('cheerio');const axios = require('axios');

async function parseHTML() {    const response = await axios.get('https://example.com');    const $ = cheerio.load(response.data);        // Extração do título da página    const title = $('title').text();    console.log('Título:', title);        // Obtendo todos os links    const links = [];    $('a').each((i, el) => {        links.push($(el).attr('href'));    });    console.log('Links:', links);        // Parsing de tabela    const tableData = [];    $('table tr').each((i, row) => {        const cells = [];        $(row).find('td, th').each((j, cell) => {            cells.push($(cell).text().trim());        });        tableData.push(cells);    });    console.log('Dados da tabela:', tableData);}

parseHTML().catch(console.error);

Vantagens do Cheerio

Alta performance — funciona até 8 vezes mais rápido que alternativas
Sintaxe jQuery familiar
Baixo consumo de memória
Instalação e configuração simples

Desvantagens

Não suporta conteúdo dinâmico
Não consegue executar JavaScript
Não é adequado para aplicações SPA

2. JSDOM — implementação completa do DOM

JSDOM emula o ambiente do navegador no Node.js, fornecendo uma implementação completa do DOM e do parser HTML. Ao contrário do Cheerio, o JSDOM pode executar JavaScript, tornando-o adequado para parsing de páginas com conteúdo dinâmico.

Instalação

npm install jsdom

Exemplo de uso

const { JSDOM } = require('jsdom');const axios = require('axios');

async function parseWithJSDOM() {    const response = await axios.get('https://example.com');    const dom = new JSDOM(response.data);    const document = dom.window.document;        // Obtendo todos os parágrafos    const paragraphs = Array.from(document.querySelectorAll('p'))        .map(p => p.textContent);    console.log('Parágrafos:', paragraphs);        // Trabalhando com atributos    const images = Array.from(document.querySelectorAll('img'))        .map(img => ({            src: img.getAttribute('src'),            alt: img.getAttribute('alt')        }));    console.log('Imagens:', images);        // Execução de scripts (cuidado!)    const { window } = new JSDOM(`<body>        <script>            document.body.innerHTML += '<p>Conteúdo dinâmico</p>';        </script>    </body>`, { runScripts: 'dangerously' });        console.log(window.document.body.innerHTML);}

parseWithJSDOM().catch(console.error);