如何在 Node.js 中使用 Cheerio

Cheerio 是一个快速可靠的库，与 Node.js 一起使用，并且非常灵活。它与 JavaScript 协同工作，使开发人员能够使用类似于 jQuery 的方法处理 HTML 或 XML 文档。在网络抓取、数据抓取或更有效地处理 HTML 文档等情况下，它可能非常有用。这篇博文将向您介绍在 Node.js 中使用 Cheerio 的原因，以及 JavaScript 的一些特性、使用它的优点以及在哪里以及如何使用它。

Cheerio 简介

Cheerio 基本上是核心 jQuery 的一个精简版本，它允许在服务器端 Node.js 中创建类似 jQuery 的对象。它与 jQuery 不同，jQuery 是一个用于在浏览器中修改 DOM 的 SM。另一方面，Cheerio 在服务器端环境中处理 HTML 或 XML。

Cheerio 的主要特性

Cheerio 的几个主要特性如下：

• 类似 jQuery 的语法： Cheerio 拥有一个简单的 API，类似于 jQuery，这使得有 jQuery 使用经验的开发人员能够快速适应 Cheerio。
• 轻量级： Cheerio 被设计成小巧快速，类似于轻量级浏览器。有了这个工具，它能够解析和操作 HTML。
• 快速解析： Cheerio 采用 htmlparser2 来快速处理该包支持的 Html 和 Xml 文档。

为什么使用 Cheerio？

以下是您选择在 Node.js 项目中使用 Cheerio 的原因：

• 网络抓取： Cheerio 是一个理想的网络抓取工具，因为您可以使用此方法轻松抓取网站。使用网页的 HTML，可以选取和修改特定元素来提取所需数据。
• 数据提取： 但是，如果您需要从 HTML 文档中挖掘某些数据，Cheerio 可以轻松地使用文档对象模型 (DOM) 来获取所需数据。
• 内容操作： Cheerio 在编辑 HTML 网页方面很有帮助，当您想创建模板或动态内容时，它效果最佳。

理解 Cheerio 工作流程

使用 Cheerio 通常涉及几个关键步骤：

• 加载 HTML： Cheerio 的第一步是将 HTML 或 XML 内容加载到框架中。这可以通过调用 Cheerio 的 load 函数并传入已生成的 HTML 字符串来实现。load 函数解析 HTML 字符串并返回一个 Cheerio 对象。
• 选择元素： 加载 HTML 后，使用 Cheerio 库中的选择方法来选择给定文档中的元素。这类似于 jQuery 选择器，您可以通过标签名、类名、ID 或任何其他属性来选择元素。
• 操作元素： 在 HTML 中选择元素后，您可以使用 Cheerio 的方法对它们进行操作。这包括修改任何元素的属性、更改元素中的文本、创建或删除其他元素等。
• 提取数据： 最后，它允许从选定的元素中提取数据，可能是文本、属性值或 HTML。

加载 HTML 内容

在开始使用 Cheerio 之前，您需要加载要处理的 HTML 数据。这可以通过使用 load 函数加载 HTML 字符串来应用 Cheerio 来实现。load 函数分析 html 并返回一个 Cheerio 对象，使您可以操作文档。

选择元素

在加载 HTML 内容后，您可以根据文档使用 Cheerio 的任何选择方法。Cheerio 支持各种选择器，类似于 jQuery，包括：

• 标签名： 按标签名分析和选择元素，例如，按 `div` 选择。
• 类名： 按 ID 选择元素（例如，`$('#my_id')`）。
• ID： 使用 ID 选择元素（例如，使用 `$('#my-id')`）。
• 属性： 使用任何属性定位元素（例如，使用名称属性 `$('input[name="username"]')`）。

Cheerio 的选择方法有助于获取选定元素的 Cheerio 对象，该对象可以被使用或从中提取数据。

示例

在 Node.js 中使用 Cheerio 解析 HTML 文件、选择元素并从中提取数据

示例 HTML 文件 (example.html)

输出

 
Welcome to Cheerio Example
First paragraph: This is a sample paragraph.   

说明

• 加载 HTML： 在此示例中，`fs.readFileSync` 函数将名为 `example.html` 的文件的内容读取为字符串，并将其存储在程序的 `html` 变量中。
• 将 HTML 加载到 Cheerio： `cheerio.load(html)` 函数允许对传递给 Cheerio 的 HTML 字符串文档进行操作，类似于使用 jQuery。
• 选择和操作元素： 例如，`$(‘h2’).each()` 检索文档中的所有 `

  ` 元素，并将其传递给迭代函数，其中 `$(element)` 指的是。`text()` 提取每个 `

  ` 标签的文本，并返回标签内的文本，然后输出到控制台。

• 提取数据： `$('p').first().text()` 选择文档中的第一个 `

  ` 元素，然后使用 `text()` 获取该 `

  ` 元素的文本。之后，它会被输出到控制台。

操作 HTML 结构

使用 Cheerio 选择元素后，您可以以各种方式操作 HTML 结构：

• 添加元素： Cheerio 允许您使用 `append`、`prepend`、`after` 和 `before` 等方法动态地向 HTML 结构添加新元素。这对于将新内容插入到文档的特定部分很有用。
• 修改属性： 您可以使用 Cheerio 的 `attr` 方法更改选定元素的属性。例如，您可能需要根据某些条件或从应用程序其他地方检索到的数据来更新图像源 (`src`) 属性或修改链接 (`href`) 属性。
• 更改文本内容： Cheerio 的 `text` 方法使您能够更新元素的文本内容。这对于更新标题、段落文本或任何需要动态生成或修改的内容特别有用。

过滤和选择特定元素

Cheerio 提供了强大的过滤和选择功能，用于定位 HTML 文档中的特定元素：

• 复杂选择器： 您可以使用复杂选择器根据元素的属性、类名或层次关系来精确定位元素。这种灵活性允许您高效地遍历和操作甚至深度嵌套的结构。
• 遍历元素： Cheerio 的遍历方法（`each`、`map` 等）允许您同时对多个元素执行操作。当您需要应用转换或从一系列相似元素中提取数据时，这非常有用。

提取数据

除了操作结构，Cheerio 在从 HTML 文档中提取特定数据方面也非常出色：

• 文本提取： 使用 Cheerio 的 `text` 方法检索选定元素的文本内容。这对于获取需要处理或显示的段落、标题或任何文本内容很有用。
• 属性提取： Cheerio 的 `attr` 方法有助于提取特定的属性，如 `href`、`src` 或自定义数据属性 (`data-*`)。此功能对于检索 URL、图像路径或与元素相关的任何元数据至关重要。

实际应用

Cheerio 的多功能性使其在 Web 开发和数据处理的各种场景中都适用：

• 网络抓取： 自动化从网站提取数据，用于竞争分析、市场研究或内容聚合等目的。
• 数据解析： 解析和处理来自各种来源的基于 HTML 的内容，例如电子邮件、文档或 Web API。Cheerio 处理和操作 HTML 的能力简化了数据提取任务。
• 内容生成： 根据应用程序逻辑或用户交互动态生成或修改 HTML 内容。这可能涉及渲染模板、更新产品列表或生成报告。

性能和效率

Cheerio 针对服务器端环境的性能和效率进行了优化：

• 轻量级： 与基于浏览器的库不同，Cheerio 设计用于在 Node.js 中高效运行，最大限度地减少资源消耗并最大限度地提高解析速度。
• 流线型处理： 该库的精简结构和简单的 API 简化了 HTML 操作任务，确保了生产环境中快速的开发和可靠的性能。

结论

总之，Cheerio 使 Node.js 开发人员能够以非常灵活的方式解析、处理和获取 HTML 文档中的数据。这使其成为从网络抓取到构建自己的复杂动态内容的强大工具。学习 Cheerio 的特性并将其集成到您的 Node.js 应用程序中，可以帮助您充分发挥开发工作流程的潜力，并提高 Web 项目的能力。