使用 `extract` 方法提取数据

extract 方法允许您从 HTML 文档中提取数据并将其存储在对象中。该方法接受一个 map 对象作为参数，其中键是将在对象上创建的属性的名称，而值是要用于提取值的 selector 或描述符。

要使用 extract 方法，您首先需要导入库并加载 HTML 文档。例如

import * as cheerio from 'cheerio';

const $ = cheerio.load(`
  <ul>
    <li>One</li>
    <li>Two</li>
    <li class="blue sel">Three</li>
    <li class="red">Four</li>
  </ul>
`);

加载文档后，您可以在加载的对象上使用 extract 方法从文档中提取数据。

以下是一些关于如何使用 extract 方法的示例

// Extract the text content of the first .red element
const data = $.extract({
  red: '.red',
});

这将返回一个包含 red 属性的对象，其值为第一个 .red 元素的文本内容。

要提取所有 .red 元素的文本内容，您可以将 selector 包含在数组中

// Extract the text content of all .red elements
const data = $.extract({
  red: ['.red'],
});

这将返回一个包含 red 属性的对象，其值为所有 .red 元素的文本内容的数组。

要更具体地说明您要提取的内容，您可以传递一个包含 selector 和 value 属性的对象。例如，要提取第一个 .red 元素的文本内容和第一个 a 元素的 href 属性

const data = $.extract({
  red: '.red',
  links: {
    selector: 'a',
    value: 'href',
  },
});

value 属性可用于指定要从所选元素中提取的属性的名称。在本例中，我们从 <a> 元素中提取 href 属性。这在幕后使用 Cheerio 的 prop 方法。

value 默认值为 textContent，它提取元素的文本内容。

作为 prop 方法内部具有特殊逻辑的属性，href 将相对于文档的 URL 解析。使用 fromURL 加载文档时，文档的 URL 将自动设置。否则，请使用 baseURL 选项指定文档的 URL。

这里有许多可用的 props；请查看 prop 方法以了解详细信息。例如，要提取所有 .red 元素的 outerHTML

const data = $.extract({
  red: [
    {
      selector: '.red',
      value: 'outerHTML',
    },
  ],
});

您还可以通过将对象指定为 value 来从多个嵌套元素中提取数据。例如，要提取所有 .red 元素和第一个 <ul> 元素中的第一个 .blue 元素的文本内容，以及第二个 <ul> 元素中所有 .sel 元素的文本内容

const data = $.extract({
  ul1: {
    selector: 'ul:first',
    value: {
      red: ['.red'],
      blue: '.blue',
    },
  },
  ul2: {
    selector: 'ul:eq(2)',
    value: {
      sel: ['.sel'],
    },
  },
});

这将返回一个包含 ul1 和 ul2 属性的对象。ul1 属性将是一个包含 red 属性的对象，其值为第一个 ul 元素中所有 .red 元素的文本内容的数组，以及一个 blue 属性。ul2 属性将是一个包含 sel 属性的对象，其值为第二个 <ul> 元素中所有 .sel 元素的文本内容的数组。

最后，您可以将函数作为 value 属性传递。该函数将使用所选的每个元素以及属性的 key 调用

const data = $.extract({
  links: [
    {
      selector: 'a',
      value: (el, key) => {
        const href = $(el).attr('href');
        return `${key}=${href}`;
      },
    },
  ],
});

这将提取所有 <a> 元素的 href 属性，并以 links=href_value 的形式返回每个元素的字符串，其中 href_value 是 href 属性的值。返回的对象将具有一个 links 属性，其值为这些字符串的数组。

综合示例

让我们从 GitHub 获取 Cheerio 的最新版本，并从发布页面中提取发布日期和发布说明

import * as cheerio from 'cheerio';

const $ = await cheerio.fromURL(
  'https://github.com/cheeriojs/cheerio/releases',
);

const data = $.extract({
  releases: [
    {
      // First, we select individual release sections.
      selector: 'section',
      // Then, we extract the release date, name, and notes from each section.
      value: {
        // Selectors are executed within the context of the selected element.
        name: 'h2',
        date: {
          selector: 'relative-time',
          // The actual release date is stored in the `datetime` attribute.
          value: 'datetime',
        },
        notes: {
          selector: '.markdown-body',
          // We are looking for the HTML content of the element.
          value: 'innerHTML',
        },
      },
    },
  ],
});

使用 extract 方法提取数据

综合示例​

使用 `extract` 方法提取数据

综合示例