TypeScript中的HTML解析：库和示例

TypeScript中的HTML解析：选择工具

HTML解析是开发解析器、网页抓取、内容分析和自动化测试时的关键任务之一。在TypeScript（和Node.js）生态系统中，有多个成熟的库可用于处理HTML文档、提取数据、修改DOM以及执行查询。在本文中，我们将介绍三种主要工具：cheerio、jsdom和node-html-parser，并展示它们与完整类型定义一起使用的示例。

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

TypeScript添加了严格的类型定义，这在处理来自HTML的非结构化数据时特别有用。您可以精确定义提取字段的类型，避免运行时错误，并提高代码的可读性。用于TypeScript的HTML解析库通常具有内置类型，或随@types/*包一起提供。

1. Cheerio — 轻量且快速的解析器

Cheerio是一个快速、灵活且轻量的库，在服务器端实现了jQuery的子集。它不会创建完整的DOM，而是解析HTML并提供方便的导航和操作API。

安装

npm install cheerionpm 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 — Node.js中的完整DOM

JSDOM是使用纯JavaScript在Node.js中实现的WHATWG DOM和HTML标准。它创建一个完整的文档，支持脚本、事件以及所有现代浏览器API。

安装

npm install jsdomnpm 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慢，消耗更多内存。