Parsing de HTML em TypeScript: bibliotecas, ferramentas e exemplos de código

Parsing de HTML em TypeScript: visão geral das melhores bibliotecas e ferramentas

O parsing de HTML é uma das tarefas essenciais no desenvolvimento de aplicações web modernas, especialmente nas áreas de web scraping, automação de testes e análise de dados. TypeScript, como uma extensão estaticamente tipada sobre JavaScript, oferece aos desenvolvedores ferramentas poderosas para processar documentos HTML de forma segura e eficiente. Neste artigo, vamos explorar as principais bibliotecas para parsing de HTML em TypeScript, suas características, vantagens e exemplos de uso.

Por que o parsing de HTML em TypeScript é necessário?

TypeScript adiciona tipagem estrita, o que é especialmente útil ao trabalhar com estruturas HTML complexas. Isso permite:

• Evitar erros de tempo de execução relacionados ao acesso incorreto a elementos DOM
• Melhorar o autocompletar na IDE
• Criar código mais legível e sustentável
• Integrar-se facilmente com frameworks modernos (Angular, React, Vue)

Bibliotecas populares para parsing de HTML

1. Cheerio

Cheerio é uma biblioteca rápida, flexível e leve que implementa um subconjunto do jQuery para o lado do servidor. É ideal para parsing de documentos HTML estáticos.

Instalação:

npm install cheerionpm install @types/cheerio -D

Exemplo de uso:

import * as cheerio from 'cheerio';

const html = `  <div class="container">    <h1>Título</h1>    <p class="content">Texto do parágrafo</p>    <ul>      <li>Elemento 1</li>      <li>Elemento 2</li>    </ul>  </div>`;

const $ = cheerio.load(html);

// Extrair títuloconst title = $('h1').text();console.log(title); // "Título"

// Extrair todos os itens da listaconst items: string[] = [];$('li').each((index, element) => {  items.push($(element).text());});console.log(items); // ["Elemento 1", "Elemento 2"]

// Buscar por classeconst content = $('.content').text();console.log(content); // "Texto do parágrafo"

2. JSDOM

JSDOM é uma implementação completa das APIs DOM e HTML no Node.js. Ao contrário do Cheerio, ele emula um ambiente de navegador, permitindo executar código JavaScript dentro de uma página HTML.

Instalação:

npm install jsdomnpm install @types/jsdom -D

Exemplo de uso:

import { JSDOM } from 'jsdom';

const html = `  <!DOCTYPE html>  <html>    <body>      <div id="app">        <span class="data">Valor 1</span>        <span class="data">Valor 2</span>      </div>    </body>  </html>`;

const dom = new JSDOM(html);const document = dom.window.document;

// Obter elemento por IDconst app = document.getElementById('app');console.log(app?.textContent); // "Valor 1Valor 2"

// Usar querySelectorconst firstData = document.querySelector('.data');console.log(firstData?.textContent); // "Valor 1"

// Obter todos os elementos por classeconst allData = document.querySelectorAll('.data');const values: string[] = [];allData.forEach(el => values.push(el.textContent || ''));console.log(values); // ["Valor 1", "Valor 2"]

3. Node-html-parser

Node-html-parser é um parser HTML rápido e simples, escrito em TypeScript. Não requer dependências externas e é ideal para tarefas onde o desempenho é importante.

Instalação:

npm install node-html-parser

Exemplo de uso:

import { parse } from 'node-html-parser';

const html = `  <table>    <tr>      <td>Célula 1</td>      <td>Célula 2</td>    </tr>    <tr