TypeScript 中的 HTML 解析：库、工具和代码示例

TypeScript 中的 HTML 解析：最佳库和工具概述

HTML 解析是现代 Web 应用程序开发中的关键任务之一，尤其是在网络爬虫、测试自动化和数据分析领域。TypeScript 作为 JavaScript 的静态类型超集，为开发者提供了安全高效处理 HTML 文档的强大工具。在本文中，我们将介绍 TypeScript 中用于 HTML 解析的主要库、它们的特点、优势以及使用示例。

为什么需要在 TypeScript 中解析 HTML？

TypeScript 增加了严格的类型检查，这在处理复杂的 HTML 结构时特别有用。它可以：

• 避免因错误访问 DOM 元素而导致的运行时错误
• 改善 IDE 中的自动补全功能
• 创建更易读和可维护的代码
• 轻松集成现代框架（Angular、React、Vue）

流行的 HTML 解析库

1. Cheerio

Cheerio 是一个快速、灵活且轻量级的库，实现了服务器端 jQuery 的子集。它非常适合解析静态 HTML 文档。

安装：

npm install cheerionpm 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 是 Node.js 上 DOM 和 HTML API 的完整实现。与 Cheerio 不同，它模拟浏览器环境，允许在 HTML 页面内执行 JavaScript 代码。

安装：

npm install jsdomnpm 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"

// 使用 querySelectorconst 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 是一个用 TypeScript 编写的快速简单的 HTML 解析器。它不需要外部依赖，非常适合对性能有要求的任务。

安装：

npm install node-html-parser

使用示例：

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

const html = `  <table>    <tr>      <td>单元格 1</td>      <td>单元格 2</td>    </tr>    <tr