Парсинг HTML в TypeScript | Библиотеки и примеры

Парсинг HTML в TypeScript: полное руководство для разработчика

TypeScript — это надстройка над JavaScript, которая добавляет строгую типизацию. Однако для парсинга HTML (извлечения данных из веб-страниц) TypeScript использует те же библиотеки, что и JavaScript, но с поддержкой типов. Это делает код надежнее, понятнее и удобнее в сопровождении. В этой статье мы разберем основные инструменты для парсинга HTML в TypeScript, покажем примеры кода и дадим рекомендации по выбору библиотеки.

Зачем парсить HTML в TypeScript?

Парсинг HTML необходим для:

Сбора данных (скрапинг) с веб-сайтов (цены, новости, контент).
Автоматизации тестирования веб-интерфейсов.
Извлечения информации из статических HTML-файлов.
Миграции контента между системами.

TypeScript помогает избежать ошибок типов при работе с DOM-элементами и результатами парсинга.

Основные библиотеки для парсинга HTML в TypeScript

Рассмотрим три наиболее популярных инструмента, которые отлично работают с TypeScript.

1. Cheerio

Cheerio — это быстрая, гибкая и легковесная библиотека, которая реализует подмножество jQuery для работы с HTML на серверной стороне. Она не требует браузера и отлично подходит для парсинга статических страниц. Для TypeScript существует пакет @types/cheerio с готовыми типами.

Установка:

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

Пример парсинга с Cheerio в TypeScript:

import * as cheerio from 'cheerio';

const html = `<html><body><h1 class="title">Привет, мир!</h1></body></html>`;
const $ = cheerio.load(html);

const title: string = $('h1.title').text();
console.log(title); // Привет, мир!

// Типизированное извлечение данных
interface PageData {
  title: string;
  links: string[];
}

const data: PageData = {
  title: $('h1').text(),
  links: $('a').map((i, el) => $(el).attr('href')).get()
};

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

Минусы: Не выполняет JavaScript, не подходит для динамических SPA.

2. JSDOM

JSDOM — это эмуляция браузерного окружения (DOM) в Node.js. Он позволяет выполнять JavaScript на странице и работать с полноценным DOM API. TypeScript поддерживает JSDOM через пакет @types/jsdom.

Установка:

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

Пример парсинга с JSDOM в TypeScript:

import { JSDOM } from 'jsdom';

const html = `<html><body><div id="content">Текст внутри</div></body></html>`;
const dom = new JSDOM(html);
const document = dom.window.document;

const content: string | null = document.getElementById('content')?.textContent ?? '';
console.log(content); // Текст внутри

// Типизация элемента
const contentDiv: HTMLElement | null = document.getElementById('content');
if (contentDiv) {
  console.log(contentDiv.innerHTML);
}

Плюсы: Полноценный DOM, поддержка JavaScript, точное соответствие браузеру.

Минусы: Тяжелее Cheerio, медленнее на простых задачах.

3. Puppeteer (с TypeScript)

Puppeteer — это библиотека для управления браузером Chrome/Chromium. Она идеальна для парсинга динамических страниц (React, Vue, Angular). TypeScript поддерживается из коробки.

Установка:

npm install puppeteer

Пример парсинга с Puppeteer в TypeScript:

import puppeteer from 'puppeteer';

async function parsePage(url: string): Promise<string> {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle0' });

  const title: string = await page.title();
  const bodyText: string = await page.$eval('body', (el: Element) => el.textContent ?? '');

  await browser.close();
  return `Title: ${title}, Body: ${bodyText.slice(0, 100)}`;
}

parsePage('https://example.com').then(console.log);

Плюсы: Работа с динамикой, скриншоты