使用CSS選擇器從HTML中選擇/提取html/text的節點

Question

假設我正在編寫一個節點腳本，該腳本使用 fetch 將 html 頁面內容檢索到變數中。

現在我有一個用於此類內容的 CSS 選擇器。我如何使用它來提取由 CSS 選擇器識別的 html 和/或文字內容。

如果有我可以利用的現有工具/包，請給出兩個層次的答案：

1. 基於純 CSS 選擇器
2. 基於 jQuery 的工具

Answer 1

要擷取 Node.js 中由 CSS 選擇器標識的 HTML/文字內容，您可以使用各種套件，例如 Cheerio、jsdom 或 Puppeteer。以下是如何使用 CSS 選擇器為基於純 CSS 選擇器和基於 jQuery 的工具提取內容的範例：

基於純 CSS 選擇器： Cheerio 是一個快速且靈活的套件，可以解析 HTML 並允許您使用 CSS 選擇器來提取資料。以下是如何使用 Cheerio 透過 CSS 選擇器提取內容：

const cheerio = require('cheerio');
const html = '
Hello World!
';

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

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

基於 jQuery 的工具： 如果您喜歡 jQuery 語法，則可以使用 jQuery 或 JSDOM 等套件。下面是一個使用 jQuery 的範例：

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

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

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

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

在這兩個範例中，我們首先使用套件（Cheerio 或 JSDOM）來載入 HTML 內容，然後使用 CSS 選擇器來選擇我們想要的內容。最後，我們使用 text() 方法來提取所選元素的文字。