How to load and manipulate an HTML fragment from a string with Cheerio?

Cheerio 是一个快速、灵活且适用于服务器端的库，它主要用于解析 HTML 和 XML 文档，实现类似在客户端使用 jQuery 的方式进行操作。当需要从字符串中加载和操作 HTML 片段时，Cheerio 非常有用。以下是使用 Cheerio 加载和操作 HTML 片段的步骤：

1. 安装 Cheerio

首先，您需要在您的项目中安装 Cheerio。如果您使用的是 Node.js，可以通过 npm 来安装：

bash
npm install cheerio

2. 加载 HTML 字符串

加载 HTML 字符串是通过 cheerio.load() 方法完成的。这个方法会返回一个类似于 jQuery 的接口，通过这个接口可以进行后续的操作。

javascript
const cheerio = require('cheerio');

// 假设我们有一段 HTML 字符串
const htmlString = `
<html>
<body>
  <h1>Welcome to My Website</h1>
  <div id="content">
    <p>This is a paragraph.</p>
  </div>
</body>
</html>
`;

// 使用 cheerio 加载 HTML 字符串
const $ = cheerio.load(htmlString);

3. 使用 Cheerio API 来操作 HTML

一旦加载了 HTML 字符串，您就可以使用类似 jQuery 的语法来选择和操作元素了。例如：

javascript
// 修改 h1 标签的文本
$('h1').text('Hello, World!');

// 添加一个新的类到段落
$('#content p').addClass('new-class');

// 插入一个新的元素
$('#content').append('<p>New paragraph</p>');

4. 输出修改后的 HTML

完成所有操作后，如果需要输出修改后的 HTML，可以使用 $.html() 方法：

javascript
const modifiedHtml = $.html();
console.log(modifiedHtml);

示例

假设您要从一个 HTML 字符串中找到所有的段落 <p>，并给它们添加一个 "highlight" 类，下面是如何做的：

javascript
const cheerio = require('cheerio');
const htmlString = '<p>First Paragraph</p><p>Second Paragraph</p>';

const $ = cheerio.load(htmlString);
$('p').addClass('highlight');

const updatedHtml = $.html();
console.log(updatedHtml);

输出结果将会是：

html
<p class="highlight">First Paragraph</p><p class="highlight">Second Paragraph</p>

通过这个例子，您可以看到如何简单快捷地使用 Cheerio 来加载和操纵 HTML 字符串。这对于处理服务器端的 HTML 模板、清洗数据或任何需要服务器端 DOM 操作的场景都非常有用。

2024年8月16日 23:45 回复

1个答案

1. 安装 Cheerio

2. 加载 HTML 字符串

3. 使用 Cheerio API 来操作 HTML

4. 输出修改后的 HTML

示例

你的答案