使用 Cheerio 加载和操作 HTML 片段，避免自动包裹-js教程-PHP中文网

使用 Cheerio 加载和操作 HTML 片段，避免自动包裹

DDD

发布： 2025-07-14 18:00:18

原创

854人浏览过

使用 cheerio 加载和操作 html 片段，避免自动包裹

Cheerio 是一个快速、灵活、简洁的 jQuery 核心实现，专门为服务器端设计。它提供了一套强大的 API，可以像 jQuery 一样解析、遍历和操作 HTML/XML 文档。然而，在使用 Cheerio 加载 HTML 片段时，默认行为是将其包裹在一个完整的 HTML 文档结构中，这可能会给直接访问和操作片段中的元素带来不便。

例如，当你尝试加载一个简单的 <div> 元素时：

<div class="artist"><i class="user blue circle icon"></i> Skyy</div>

登录后复制

使用默认的 cheerio.load() 加载后，你会发现它被包裹在了 <html>, <head>, <bodyyoujiankuohaophpcn 标签中：

<html><head></head><body><div class="artist"><i class="user blue circle icon"></i> Skyy</div></body></html>

登录后复制

这导致你需要使用 $('body').children().first() 这样的选择器才能访问到原始的 <div> 元素。但是，这种方法并不总是有效，特别是当加载的 HTML 片段是 <meta> 标签时，Cheerio 会将其放置在 <head> 标签中，导致之前的选择器失效。

立即学习“前端免费学习笔记（深入）”；

为了解决这个问题，Cheerio 提供了一个选项，可以禁用自动包裹行为。这个选项通过 cheerio.load() 的第三个参数来控制。

禁用自动包裹

cheerio.load() 函数的完整签名为：

cheerio.load(html, options, isDocument);

登录后复制

其中，html 是要加载的 HTML 字符串，options 是一个可选的配置对象，isDocument 是一个布尔值，用于指定是否将 HTML 字符串视为完整的文档。

要禁用自动包裹，只需将 isDocument 设置为 false 即可。由于 options 参数是可选的，我们可以将其设置为 null。

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

查看详情

以下是示例代码：

const cheerio = require('cheerio');

const htmlString = '<div class="artist"><i class="user blue circle icon"></i> Skyy</div>';
const $ = cheerio.load(htmlString, null, false);

console.log($.html());

登录后复制

输出结果将是：

<div class="artist"><i class="user blue circle icon"></i> Skyy</div>

登录后复制

可以看到，HTML 片段没有被包裹在额外的标签中，可以直接使用 Cheerio 的 API 进行操作。

示例：操作 HTML 片段

现在，我们可以直接使用 Cheerio 的 API 来操作加载的 HTML 片段。例如，获取 <div> 元素的文本内容：

const cheerio = require('cheerio');

const htmlString = '<div class="artist"><i class="user blue circle icon"></i> Skyy</div>';
const $ = cheerio.load(htmlString, null, false);

const text = $('.artist').text();
console.log(text); // 输出: Skyy

登录后复制

或者，获取 <i> 元素的 class 属性：

const cheerio = require('cheerio');

const htmlString = '<div class="artist"><i class="user blue circle icon"></i> Skyy</div>';
const $ = cheerio.load(htmlString, null, false);

const iconClass = $('.artist i').attr('class');
console.log(iconClass); // 输出: user blue circle icon

登录后复制

总结

通过设置 cheerio.load() 的第三个参数为 false，可以有效地禁用 Cheerio 的自动包裹行为，从而更方便地加载和操作 HTML 片段。这在处理动态生成的 HTML 片段或需要精确控制 HTML 结构的情况下非常有用。记住，在不需要 Cheerio 将你的 HTML 片段视为完整文档时，始终设置 isDocument 为 false。

以上就是使用 Cheerio 加载和操作 HTML 片段，避免自动包裹的详细内容，更多请关注php中文网其它相关文章！