Node.js 中解析 HTML 的方法介绍

在 Web 开发中，解析 HTML 是一个常见的任务，特别是当我们需要从网页中提取数据或操作 DOM 时。掌握 Node.js 中解析 HTML 的各种方式，可以大大提高我们提取和处理网页数据的效率。本文将介绍如何在 Node.js 中解析 HTML。

基本概念

HTML 解析是指将 HTML 文本转换为可操作的数据结构，通常是 DOM（文档对象模型）。DOM 是一个树状结构，表示了网页的结构和内容，允许我们使用 JavaScript 操作和修改网页。

常用的 HTML 解析方法

以下是在 Node.js 中常用的几种 HTML 解析方法：

1.Cheerio：Cheerio 是一个类似于 jQuery 的库，它可以在服务器端使用 CSS 选择器来解析 HTML 并操作 DOM。它适用于解析静态 HTML 页面。

2.jsdom：jsdom 是一个在 Node.js 中模拟 DOM 环境的库。它能够解析和操作 HTML，同时还支持模拟浏览器环境中的许多特性，如事件处理和异步请求。

3.htmlparser2：htmlparser2 是一个快速的 HTML 解析器，它能够将 HTML 文档解析成 DOM 节点流。它通常用于处理大型 HTML 文档或流式数据。

实践案例：使用 Cheerio 解析 HTML

以下是一个使用 Cheerio 解析 HTML 的实际案例，其中包含基本的路由与请求处理。确保你的开发环境中已经安装了 Node.js 和 npm。

1、首先，创建一个新的文件夹，并在该文件夹中运行以下命令初始化项目：

npm init -y

2、安装所需的依赖库：

npm install express cheerio axios

3、创建一个名为 index.js 的文件，然后编写以下代码：

const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');  // 引入 cheerio 库，用于解析 HTML

const app = express();
const PORT = 3000;

app.get('/', async (req, res) => {
  try {
    // 使用 Axios 发起 GET 请求获取网页的 HTML 内容
    const response = await axios.get('https://apifox.com/blog/mock-manual/'); // 替换为你想要解析的网页 URL
    const html = response.data;  // 获取响应中的 HTML 内容
    
    const $ = cheerio.load(html);  // 将 HTML 文本传递给 cheerio，创建一个类似于 jQuery 的对象
    
    // 使用 cheerio 对象的选择器来获取网页标题，并提取文本内容
    const title = $('title').text();  
    
    res.send(`Title: ${title}`);  // 将标题作为响应发送给客户端
  } catch (error) {
    console.error(error);
    res.status(500).send('An error occurred');  // 发生错误时发送错误响应
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);  // 启动服务器并监听指定端口
});

在上述代码中，注释解释了每个关键步骤的作用：

• 通过 axios.get() 发起 GET 请求，获取网页的 HTML 内容。
• 使用 Cheerio 的 $ = cheerio.load(html) 创建了一个可用于选择 DOM 元素的 Cheerio 对象。
• 通过 $() 使用类似于 jQuery 的选择器，获取