跳至主要内容

配置 Cheerio

在本指南中，我们将介绍如何配置 Cheerio 以使用不同类型的文档，以及如何使用和配置库附带的不同解析器。

使用 parse5 解析 HTML​

默认情况下，Cheerio 使用 parse5 解析器来解析 HTML 文档。parse5 是一个优秀的项目，严格符合 HTML 标准。但是，如果您需要修改 HTML 输入的解析选项，可以将一个额外的对象传递给 .load()

const cheerio = require('cheerio');
const $ = cheerio.load('<noscript><h1>Nested Tag!</h1></noscript>', {
  scriptingEnabled: false,
});

例如，如果您希望 <noscript> 标签的内容被解析为 HTML，可以将 scriptingEnabled 选项设置为 false。

有关选项及其效果的完整列表，请查看 API 文档。

片段模式​

默认情况下，parse5 会将它接收到的文档视为完整的 HTML 文档，并将内容构建在一个嵌入了 <head> 和 <body> 标签的 <html> 文档元素中。

const $ = cheerio.load('<li>Apple</li><li>Banana</li>');

$.html(); // => '<html><head></head><body><li>Apple</li><li>Banana</li></body></html>'

parse5 还支持“片段模式”，允许您解析 HTML 片段，而不是完整的文档。要使用此模式，请将一个布尔值传递给 .load() 方法，以指示您是否正在解析完整文档

// Note that we are passing `false`, as we are not parsing a full document.
const $ = cheerio.load('<li>Apple</li><li>Banana</li>', {}, false);

$.html(); // => '<li>Apple</li><li>Banana</li>'

这将解析 HTML 片段作为一个独立的文档，而不是将其视为一个更大的文档的一部分。

使用 htmlparser2 解析 XML​

默认情况下，Cheerio 使用 htmlparser2 解析 XML 文档。htmlparser2 是一个快速且内存高效的解析器，可以处理 HTML 和 XML。要解析 XML，请将 xml 选项传递给 .load()

const $ = cheerio.load('<ul id="fruits">...</ul>', {
  xml: true,
});

如果您需要自定义 XML 输入的解析选项，可以将一个对象作为 xml 选项传递给 .load()，其中包含您要更改的选项

const $ = cheerio.load('<ul id="fruits">...</ul>', {
  xml: {
    withStartIndices: true,
  },
});

当设置了 xml 时，默认选项为

{
    xmlMode: true, // Enable htmlparser2's XML mode.
    decodeEntities: true, // Decode HTML entities.
    withStartIndices: false, // Add a `startIndex` property to nodes.
    withEndIndices: false, // Add an `endIndex` property to nodes.
}

xml 对象中的选项直接来自 htmlparser2，因此在 htmlparser2 中可以使用的所有选项在 cheerio 中也都是有效的。

有关选项及其效果的完整列表，请参阅 API 文档。

使用 htmlparser2 解析 HTML​

某些用户可能希望使用 htmlparser2 库解析标记，并使用 Cheerio 遍历和操作生成的结构。这可能是因为那些从 Cheerio 的 1.0 之前版本（依赖于 htmlparser2）升级的用户，那些处理无效标记的用户（因为 htmlparser2 更宽容1），或那些在性能关键情况下操作的用户（因为 htmlparser2 通常更快，并且生成的 DOM 占用更少的内存）。

为了支持这些情况，您只需在 xml 选项中禁用 xmlMode

const $ = cheerio.load('<ul id="fruits">...</ul>', {
  xml: {
    // Disable `xmlMode` to parse HTML with htmlparser2.
    xmlMode: false,
  },
});

.load() 也接受与 htmlparser2 兼容的数据结构作为它的第一个参数。用户可以安装 htmlparser2，使用它解析输入，并将结果传递给 .load()

import * as htmlparser2 from 'htmlparser2';
const dom = htmlparser2.parseDocument(document, options);

const $ = cheerio.load(dom);

此方法的缺点是它仍然会使用 parse5 的序列化器，因此生成的输出将是 HTML，而不是 XML，并且不会尊重任何提供的选项。因此，建议禁用 xmlMode，如上所示。

提示

您也可以使用 Cheerio 的瘦身导出，它始终使用 htmlparser2。这将避免加载 parse5，从而节省一些字节，例如在浏览器环境中

import * as cheerio from 'cheerio/slim';

结论​

在本指南中，我们探讨了如何分别使用 parse5 和 htmlparser2 配置 Cheerio 以解析 HTML 和 XML 文档。我们还讨论了如何修改解析选项以及如何直接使用 htmlparser2。

脚注​

  1. 请注意，“更宽容”意味着 htmlparser2 具有错误校正机制，这些机制并不总是与 web 浏览器遵守的标准匹配。当解析非 HTML 内容时，此行为可能很有用。 ↩