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

Парсинг HTML в TypeScript: обзор лучших библиотек и инструментов

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

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

TypeScript добавляет строгую типизацию, что особенно полезно при работе со сложными HTML-структурами. Это позволяет:

• Избежать ошибок времени выполнения, связанных с неправильным доступом к DOM-элементам
• Улучшить автодополнение в IDE
• Создавать более читаемый и поддерживаемый код
• Легко интегрироваться с современными фреймворками (Angular, React, Vue)

Популярные библиотеки для парсинга HTML

1. Cheerio

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

Установка:

npm install cheerio
npm install @types/cheerio -D

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

import * as cheerio from 'cheerio';

const html = `
  <div class="container">
    <h1>Заголовок</h1>
    <p class="content">Текст параграфа</p>
    <ul>
      <li>Элемент 1</li>
      <li>Элемент 2</li>
    </ul>
  </div>
`;

const $ = cheerio.load(html);

// Извлечение заголовка
const title = $('h1').text();
console.log(title); // "Заголовок"

// Извлечение всех элементов списка
const items: string[] = [];
$('li').each((index, element) => {
  items.push($(element).text());
});
console.log(items); // ["Элемент 1", "Элемент 2"]

// Поиск по классу
const content = $('.content').text();
console.log(content); // "Текст параграфа"

2. JSDOM

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

Установка:

npm install jsdom
npm install @types/jsdom -D

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

import { JSDOM } from 'jsdom';

const html = `
  <!DOCTYPE html>
  <html>
    <body>
      <div id="app">
        <span class="data">Значение 1</span>
        <span class="data">Значение 2</span>
      </div>
    </body>
  </html>
`;

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

// Получение элемента по ID
const app = document.getElementById('app');
console.log(app?.textContent); // "Значение 1Значение 2"

// Использование querySelector
const firstData = document.querySelector('.data');
console.log(firstData?.textContent); // "Значение 1"

// Получение всех элементов по классу
const allData = document.querySelectorAll('.data');
const values: string[] = [];
allData.forEach(el => values.push(el.textContent || ''));
console.log(values); // ["Значение 1", "Значение 2"]

3. Node-html-parser

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

Установка:

npm install node-html-parser

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

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

const html = `
  <table>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
    </tr>
    <tr>
      <td>Ячейка 3</td>
      <td>Ячейка 4</td>
    </tr>
  </table>
`;

const root = parse(html);

// Извлечение всех ячеек таблицы
const cells = root.querySelectorAll('td');
const cellData: string[] = cells.map(cell => cell.text);
console.log(cellData); // ["Ячейка 1", "Ячей