Parsing de HTML em TypeScript: bibliotecas, métodos e exemplos de código

Parsing de HTML em TypeScript: escolhendo a ferramenta

O parsing de HTML é uma das tarefas principais no desenvolvimento de parsers, web scraping, análise de conteúdo e automação de testes. No ecossistema TypeScript (e Node.js), existem várias bibliotecas maduras que permitem trabalhar com documentos HTML, extrair dados, modificar o DOM e executar consultas. Neste artigo, vamos abordar três ferramentas principais: cheerio, jsdom e node-html-parser, além de mostrar exemplos de uso com tipagem completa.

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

O TypeScript adiciona tipagem estrita, o que é especialmente útil ao trabalhar com dados não estruturados de HTML. Você pode definir precisamente os tipos dos campos extraídos, evitar erros em tempo de execução e melhorar a legibilidade do código. As bibliotecas para parsing de HTML em TypeScript geralmente possuem tipos embutidos ou são fornecidas com pacotes @types/*.

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. Ela não cria um DOM completo, mas faz o parsing do HTML e fornece uma API conveniente para navegação e manipulação.

Instalação

npm install cheerionpm install --save-dev @types/cheerio

Exemplo de uso com TypeScript

import * as cheerio from 'cheerio';

interface ParsedProduct {  title: string;  price: number;  link: string;}

const html = `  <div class="product">    <h2 class="title">Notebook</h2>    <span class="price">75000</span>    <a href="/product/1">Detalhes</a>  </div>`;

const $ = cheerio.load(html);const products: ParsedProduct[] = [];

$('.product').each((index, element) => {  const title = $(element).find('.title').text().trim();  const priceText = $(element).find('.price').text().trim();  const price = parseFloat(priceText);  const link = $(element).find('a').attr('href') || '';

  if (title && !isNaN(price)) {    products.push({ title, price, link });  }});

console.log(products);// [{ title: 'Notebook', price: 75000, link: '/product/1' }]

Vantagens: alta performance, sintaxe familiar do jQuery, tamanho pequeno.

Desvantagens: não suporta execução de JavaScript, não possui DOM completo.

2. JSDOM — DOM completo no Node.js

JSDOM é uma implementação dos padrões WHATWG DOM e HTML em JavaScript puro para Node.js. Ele cria um documento completo, suporta scripts, eventos e todas as APIs modernas do navegador.

Instalação

npm install jsdomnpm install --save-dev @types/jsdom

Exemplo com tipagem

import { JSDOM } from 'jsdom';

interface Article {  headline: string;  summary: string;  url: string;}

const html = `  <article>    <h1>TypeScript 5.0: novas funcionalidades</h1>    <p>Visão geral das principais mudanças e melhorias</p>    <a href="/article/ts5">Ler</a>  </article>`;

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

const articles: Article[] = [];const articleElements = document.querySelectorAll('article');

articleElements.forEach((article) => {  const headline = article.querySelector('h1')?.textContent?.trim() || '';  const summary = article.querySelector('p')?.textContent?.trim() || '';  const url = article.querySelector('a')?.getAttribute('href') || '';  articles.push({ headline, summary, url });});

console.log(articles);

Vantagens: emulação completa do navegador, suporte a JavaScript, trabalho com formulários e eventos.

Desvantagens: mais pesado, mais lento que cheerio, consome mais memória.

3. node-html-parser — parser nativo rápido