メインコンテンツへスキップ

Cheerio の拡張

Cheerio にはすでにドキュメントを操作する多くの方法がありますが、独自機能を追加したい場合もあります。このガイドでは、カスタム CSS 擬似要素の追加と、Cheerio のプラグインの作成という 2 つの方法について説明します。

カスタム CSS 擬似クラスの追加​

pseudos オプションは擬似クラスを追加するための拡張ポイントです。これは、名前から文字列または関数のマップへのマップです。

  • 文字列値は、選択される要素が一致する必要があるセレクターです。
  • 関数は、最初の引数として要素、2 番目の引数としてオプションのパラメーターを使用して呼び出されます。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;
  }
}