Парсинг HTML в TypeScript: библиотеки, методы и примеры кода

Парсинг HTML в TypeScript: выбираем инструмент

Парсинг HTML — одна из ключевых задач при разработке парсеров, веб-скрапинга, анализа контента и автоматизации тестирования. В экосистеме TypeScript (и Node.js) существует несколько зрелых библиотек, которые позволяют работать с HTML-документами, извлекать данные, модифицировать DOM и выполнять запросы. В этой статье мы рассмотрим три основных инструмента: cheerio, jsdom и node-html-parser, а также покажем примеры их использования с полной типизацией.

Зачем нужен парсинг HTML в TypeScript?

TypeScript добавляет строгую типизацию, что особенно полезно при работе с неструктурированными данными из HTML. Вы можете точно определить типы извлекаемых полей, избежать ошибок времени выполнения и улучшить читаемость кода. Библиотеки для парсинга HTML в TypeScript обычно имеют встроенные типы или поставляются с пакетами @types/*.

1. Cheerio — лёгкий и быстрый парсер

Cheerio — это быстрая, гибкая и лёгкая библиотека, реализующая подмножество jQuery для серверной стороны. Она не создаёт полноценный DOM, а парсит HTML и предоставляет удобный API для навигации и манипуляций.

Установка

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

Пример использования с TypeScript

import * as cheerio from 'cheerio';

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

const html = `
  <div class="product">
    <h2 class="title">Ноутбук</h2>
    <span class="price">75000</span>
    <a href="/product/1">Подробнее</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: 'Ноутбук', price: 75000, link: '/product/1' }]

Плюсы: высокая производительность, знакомый jQuery-синтаксис, малый размер.

Минусы: не поддерживает выполнение JavaScript, нет полноценного DOM.

2. JSDOM — полноценный DOM в Node.js

JSDOM — это реализация стандартов WHATWG DOM и HTML в чистом JavaScript для Node.js. Он создаёт полноценный документ, поддерживает скрипты, события и все современные API браузера.

Установка

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

Пример с типизацией

import { JSDOM } from 'jsdom';

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

const html = `
  <article>
    <h1>TypeScript 5.0: новые возможности</h1>
    <p>Обзор ключевых изменений и улучшений</p>
    <a href="/article/ts5">Читать</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);

Плюсы: полная эмуляция браузера, поддержка JavaScript, работа с формами, событиями.

Минусы: более тяжёлый, медленнее cheerio, потребляет больше памяти.

3. node-html-parser — быстрый нативный парсер

node-html-parser — это быстрый HTML-парсер, написанный на TypeScript. Он не требует внешних зависимостей и предоставляет минималистичный API для разбора и навигации по DOM.

Установка

npm install node-html-parser

Пример кода

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

interface User {
  name: string;
  email: string;
}

const html = `
  <div class="user">
    <span class="name