Node.js脚本中用fetch获取HTML后，如何通过CSS选择器提取内容？

假设你已经通过fetch获取到HTML内容并存储在htmlContent变量中，以下是两类工具方案：

1. 纯CSS选择器类工具（parse5 + css-select） #

这类工具专注于DOM解析和CSS选择器查询，无额外冗余API，仅提供核心选择能力。

操作步骤： #

1. 安装依赖：

npm install parse5 css-select

2. 代码示例：

const fetch = require('node-fetch');
const parse5 = require('parse5');
const { select, selectAll } = require('css-select');

async function extractContent() {
  // 获取目标页面HTML
  const response = await fetch('https://example.com');
  const htmlContent = await response.text();

  // 解析HTML为标准DOM树
  const document = parse5.parse(htmlContent);

  // 提取单个元素的文本内容
  const singleElementText = select('#target-id', document).childNodes[0].value;
  // 提取单个元素的HTML结构
  const singleElementHtml = parse5.serialize(select('#target-id', document));

  // 提取多个元素的文本内容
  const multiElementTexts = selectAll('.target-class', document).map(el => el.childNodes[0].value);
  // 提取多个元素的HTML结构
  const multiElementHtmls = selectAll('.target-class', document).map(el => parse5.serialize(el));

  console.log('单个元素文本:', singleElementText);
  console.log('单个元素HTML:', singleElementHtml);
}

extractContent();

2. jQuery类工具（cheerio） #

Cheerio复刻了jQuery的核心API，上手成本极低，适合熟悉jQuery语法的开发者。

操作步骤： #

1. 安装依赖：

npm install cheerio node-fetch

2. 代码示例：

const fetch = require('node-fetch');
const cheerio = require('cheerio');

async function extractContent() {
  // 获取目标页面HTML
  const response = await fetch('https://example.com');
  const htmlContent = await response.text();

  // 加载HTML到Cheerio，生成jQuery风格操作对象
  const $ = cheerio.load(htmlContent);

  // 提取单个元素的文本内容
  const singleElementText = $('#target-id').text();
  // 提取单个元素的HTML结构
  const singleElementHtml = $('#target-id').html();

  // 提取多个元素的文本内容
  const multiElementTexts = [];
  $('.target-class').each((_, el) => {
    multiElementTexts.push($(el).text());
  });
  // 提取多个元素的HTML结构
  const multiElementHtmls = [];
  $('.target-class').each((_, el) => {
    multiElementHtmls.push($(el).html());
  });

  console.log('单个元素文本:', singleElementText);
  console.log('多个元素文本:', multiElementTexts);
}

extractContent();

补充提示： #

• 上述工具仅能处理静态HTML，若目标页面包含JS动态渲染内容，需搭配puppeteer等无头浏览器工具抓取完整渲染后的页面。
• 选择器语法遵循标准CSS规范，支持ID选择器、类选择器、属性选择器、伪类等常用语法。

内容的提问来源于stack exchange，提问作者xpt