在 TypeScript 中解析 HTML：库、工具与示例

在 TypeScript 中解析 HTML：开发者完整指南

TypeScript 是 JavaScript 的超集，增加了强类型支持。然而，对于 HTML 解析（从网页中提取数据），TypeScript 使用与 JavaScript 相同的库，但带有类型支持。这使得代码更可靠、更清晰、更易于维护。在本文中，我们将介绍在 TypeScript 中解析 HTML 的主要工具，展示代码示例，并提供库选择建议。

为什么要在 TypeScript 中解析 HTML？

解析 HTML 的必要性体现在：

• 从网站收集数据（抓取）（如价格、新闻、内容）。
• 自动化 Web 界面测试。
• 从静态 HTML 文件中提取信息。
• 在系统之间迁移内容。

TypeScript 有助于避免在处理 DOM 元素和解析结果时出现类型错误。

在 TypeScript 中解析 HTML 的主要库

我们来看三个最流行的工具，它们都能很好地与 TypeScript 配合使用。

1. Cheerio

Cheerio 是一个快速、灵活且轻量级的库，它在服务器端实现了 jQuery 的一个子集用于处理 HTML。它不需要浏览器，非常适合解析静态页面。对于 TypeScript，有包含现成类型的 @types/cheerio 包。

安装：

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

在 TypeScript 中使用 Cheerio 解析的示例：

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 是在 Node.js 中对浏览器环境（DOM）的模拟。它允许在页面上执行 JavaScript 并使用完整的 DOM API。TypeScript 通过 @types/jsdom 包支持 JSDOM。

安装：

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

在 TypeScript 中使用 JSDOM 解析的示例：

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

在 TypeScript 中使用 Puppeteer 解析的示例：

import puppeteer from 'puppeteer';

async function parsePage(url: string): Promise<string> {  const browser = await puppeteer.