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

Cheerioの設定

このガイドでは、Cheerioをさまざまな種類のドキュメントに対応させるための設定方法と、ライブラリに同梱されているさまざまなパーサーの使用方法と設定方法について説明します。

parse5を使用したHTMLの解析​

デフォルトでは、CheerioはHTMLドキュメントの解析にparse5パーサーを使用します。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はXMLドキュメントにhtmlparser2を使用します。htmlparser2は、HTMLとXMLの両方を処理できる高速かつメモリ効率の高いパーサーです。XMLを解析するには、.load()にxmlオプションを渡します。

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

XML入力の解析オプションをカスタマイズする必要がある場合は、変更するオプションを含むオブジェクトを.load()にxmlオプションとして渡すことができます。

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ドキュメントを参照してください。

HTMLにhtmlparser2を使用する​

一部のユーザーは、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のシリアライザーが引き続き使用されるため、結果の出力はXMLではなくHTMLになり、指定されたオプションは尊重されないことです。したがって、上記のようにxmlModeを無効にすることをお勧めします。

ヒント

また、Cheerioのスリムエクスポートを使用することもできます。これは常にhtmlparser2を使用します。これにより、parse5のロードを回避でき、たとえばブラウザ環境でいくつかのバイトを節約できます。

import * as cheerio from 'cheerio/slim';

結論​

このガイドでは、parse5とhtmlparser2をそれぞれ使用して、HTMLドキュメントとXMLドキュメントを解析するためのCheerioの設定方法について説明しました。また、解析オプションの変更方法とhtmlparser2を直接使用する方法についても説明しました。

脚注​

  1. 「より寛容」とは、htmlparser2にはWebブラウザが遵守する標準と常に一致するとは限らないエラー修正メカニズムがあることを意味します。この動作は、非HTMLコンテンツを解析する場合に役立つことがあります。 ↩