Parseo de HTML en TypeScript: bibliotecas y ejemplos |…

Parseo de HTML en TypeScript: eligiendo la herramienta

El parseo de HTML es una de las tareas clave al desarrollar parsers, web scraping, análisis de contenido y automatización de pruebas. En el ecosistema de TypeScript (y Node.js) existen varias bibliotecas maduras que permiten trabajar con documentos HTML, extraer datos, modificar el DOM y realizar consultas. En este artículo analizaremos tres herramientas principales: cheerio, jsdom y node-html-parser, y mostraremos ejemplos de su uso con tipificación completa.

¿Por qué es necesario el parseo de HTML en TypeScript?

TypeScript añade tipificación estricta, lo que es especialmente útil al trabajar con datos no estructurados provenientes de HTML. Puedes definir con precisión los tipos de los campos extraídos, evitar errores en tiempo de ejecución y mejorar la legibilidad del código. Las bibliotecas para el parseo de HTML en TypeScript suelen tener tipos integrados o incluirse con paquetes @types/*.

1. Cheerio — un parser ligero y rápido

Cheerio es una biblioteca rápida, flexible y ligera que implementa un subconjunto de jQuery para el lado del servidor. No crea un DOM completo, sino que analiza el HTML y proporciona una API conveniente para la navegación y manipulación.

Instalación

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

Ejemplo de uso con TypeScript

import * as cheerio from 'cheerio';

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

const html = `  <div class="product">    <h2 class="title">Portátil</h2>    <span class="price">75000</span>    <a href="/product/1">Más detalles</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: 'Portátil', price: 75000, link: '/product/1' }]

Ventajas: alto rendimiento, sintaxis familiar de jQuery, tamaño reducido.

Desventajas: no admite la ejecución de JavaScript, no tiene un DOM completo.

2. JSDOM — DOM completo en Node.js

JSDOM es una implementación de los estándares WHATWG DOM y HTML en JavaScript puro para Node.js. Crea un documento completo, admite scripts, eventos y todas las API modernas del navegador.

Instalación

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

Ejemplo con tipificación

import { JSDOM } from 'jsdom';

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

const html = `  <article>    <h1>TypeScript 5.0: nuevas funcionalidades</h1>    <p>Resumen de los cambios y mejoras clave</p>    <a href="/article/ts5">Leer</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);

Ventajas: emulación completa del navegador, soporte de JavaScript, trabajo con formularios y eventos.

Desventajas: más pesado, más lento que cheerio, consume más memoria.