CSSセレクターを使用してHTMLからhtml/textのノードを選択/抽出します

Question

fetch を使用して HTML ページのコンテンツを変数に取得するノード スクリプトを作成しているとします。

これで、このようなもの用の CSS セレクターができました。これを使用して、CSS セレクターによって認識される HTML コンテンツやテキスト コンテンツを抽出するにはどうすればよいですか。

活用できる既存のツール/パッケージがある場合は、2 つのレベルで回答してください:

1. 純粋な CSS セレクターに基づく
2. jQuery ベースのツール

Answer 1

Node.js の CSS セレクターによって識別された HTML/テキスト コンテンツを抽出するには、Cheerio、jsdom、Puppeteer などのさまざまなパッケージを使用できます。 CSS セレクターを使用して、純粋な CSS セレクター ベースおよび jQuery ベースのツールのコンテンツを抽出する方法の例を次に示します。

純粋な CSS セレクターに基づく: Cheerio は、HTML を解析し、CSS セレクターを使用してデータを抽出できるようにする高速かつ柔軟なパッケージです。 Cheerio を使用して CSS セレクター経由でコンテンツを抽出する方法は次のとおりです:

const チェリオ = require('チェリオ'); const html = '

Hello World!
';

const $ = Cheerio.load(html);
const content = $('.content').text();

console.log(content); // 出力: Hello World!

jQuery ベースのツール: jQuery 構文を好む場合は、jQuery や JSDOM などのパッケージを使用できます。 jQuery を使用した例を次に示します:

const jsdom = require('jsdom'); const { JSDOM } = jsdom; const html = '

Hello World!
';
const dom = 新しい JSDOM(html);
const $ = require('jquery')(dom.window);

const content = $('.content').text();

console.log(content); // 出力: Hello World!

どちらの例でも、最初にパッケージ (Cheerio または JSDOM) を使用して HTML コンテンツをロードし、次に CSS セレクターを使用して必要なコンテンツを選択します。最後に、text() メソッドを使用して、選択した要素のテキストを抽出します。