跳至主要内容

扩展 Cheerio

Cheerio 已经提供了许多处理文档的方式，但有时你可能想要添加自定义功能。本指南将介绍两种方法：添加自定义 CSS 伪元素和为 Cheerio 编写插件。

添加自定义 CSS 伪类​

pseudos 选项是添加伪类的扩展点。它是一个从名称到字符串或函数的映射。

  • 字符串值是一个选择器，元素必须匹配才能被选中。
  • 函数使用元素作为其第一个参数，可选参数作为第二个参数调用。如果它返回 true，则选择该元素。

以下是如何使用 pseudos 选项的示例

const $ = cheerio.load('<div class="foo"></div><div data-bar="boo"></div>', {
  pseudos: {
    // `:foo` is an alias for `div.foo`
    foo: 'div.foo',
    // `:bar(val)` is equivalent to `[data-bar=val s]`
    bar: (el, val) => el.attribs['data-bar'] === val,
  },
});

$(':foo').length; // 1
$('div:bar(boo)').length; // 1
$('div:bar(baz)').length; // 0

为 Cheerio 编写插件​

加载文档后，可以使用自定义插件方法扩展原型或等效的 fn 属性。以下是一个示例

const $ = cheerio.load('<html><body>Hello, <b>world</b>!</body></html>');
$.prototype.logHtml = function () {
  console.log(this.html());
};

$('body').logHtml(); // logs "Hello, <b>world</b>!" to the console

如果您使用的是 TypeScript，则应为您的新方法添加类型定义

declare module 'cheerio' {
  interface Cheerio<T> {
    logHtml(this: Cheerio<T>): void;
  }
}