使用 Cheerio 加载和操作 HTML 片段-js教程-PHP中文网

使用 Cheerio 加载和操作 HTML 片段

碧海醫心

发布： 2025-07-14 18:02:30

原创

841人浏览过

使用 cheerio 加载和操作 html 片段

Cheerio 是一个快速、灵活、简洁的 jQuery 核心实现的 Node.js 库，主要用于服务器端解析和操作 HTML。在处理 HTML 片段时，Cheerio 默认会将片段包裹在完整的 HTML 文档结构中，这在某些情况下会带来不便。本文将介绍如何避免这种默认行为，直接加载和操作 HTML 片段。

通常，我们使用 cheerio.load() 函数来加载 HTML 字符串：

const cheerio = require('cheerio');

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

登录后复制

上述代码的输出结果如下：

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

登录后复制

可以看到，Cheerio 将 HTML 片段包裹在了 <html>, <head>, <bodyyoujiankuohaophpcn 标签中。如果只想直接操作 HTML 片段，可以使用 cheerio.load() 函数的第三个参数，将其设置为 false。

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

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());

登录后复制

现在，输出结果将变为：

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

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

查看详情

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

登录后复制

这样，我们就可以直接使用 Cheerio 的各种方法来操作 HTML 片段，例如：

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 artistName = $('.artist').text();
console.log(artistName); // 输出: Skyy

登录后复制

注意事项：

cheerio.load() 函数的第二个参数是可选的，用于配置 Cheerio 的行为。如果不需要配置，可以将其设置为 null。
将第三个参数设置为 false 后，Cheerio 不会再将 HTML 片段包裹在完整的 HTML 文档结构中，因此需要确保 HTML 片段本身是有效的。

总结：

通过设置 cheerio.load() 函数的第三个参数为 false，可以避免 Cheerio 默认将 HTML 片段包裹在完整 HTML 文档结构中的行为，从而更方便地加载和操作 HTML 片段。这在处理动态生成的 HTML 内容或需要精确控制 HTML 结构时非常有用。

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