npm 包 cheerio-fetch 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理网页的 HTML 内容，解析数据或者进行数据相关的操作。今天，我们要来介绍一个强大的npm包 - cheerio-fetch。该包可以让你通过 Node.js 从网络中获取 HTML 内容，并提供基于 jQuery 选择器的 HTML 解析工具。在本文中，我们将重点介绍 cheerio-fetch 的使用方法，详细讲解如何使用 cheerio-fetch 来解析 HTML 内容。

引入 cheerio-fetch

首先，我们需要在工程中引入 cheerio-fetch。可以通过执行以下命令，将其安装到项目中。

npm install cheerio-fetch

在此之后，我们就可以在项目中使用 cheerio-fetch 了。

获取远程 HTML 内容

我们首先需要获取远程网址的 HTML 内容，可以使用 cheerio-fetch 提供的 fetch 方法来获取。

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

cheerioFetch.fetch('https://www.baidu.com')
.then($ => {
  console.log($.html());
});

fetch 方法的返回值是一个 Promise 对象，其中的 resolve 函数的参数是合法的cheerio对象。可以通过 $.html() 方法来打印出 HTML 内容。

解析 HTML 内容

接下来，我们需要使用 cheerio-fetch 提供的解析工具，遍历 HTML 标签内容。cheerio-fetch 能够将 HTML 内容解析成树形结构，可以用于寻找标签节点。

cheerioFetch.fetch('https://www.baidu.com')
.then($ => {
  console.log($('title').text());
});

在这个例子中，我们使用 $ 符号作为 cheerio-fetch 的默认别名，通过 $('title') 选择器来获取网页的标题内容。

另外，cheerio-fetch 还提供了更为丰富的选择器，可以通过类名、ID、属性等方式进行选择。例如：

$('[class="container"]')   // 通过类名选择标签
$('#nav')                  // 通过 ID 选择标签
$('a[href="https://www.baidu.com"]')  // 通过属性选择标签

当然，cheerio-fetch 也支持通过嵌套规则进行选择器，例如：

$('.container li.active p.time')

数据抽取

最后，我们需要将网页的 HTML 树中的数据抽取出来。cheerio-fetch 提供了 text() 方法来获取标签中的文本数据，attr() 方法来获取标签中的属性，还有一些类似于 find、parent、next、prev 等方法，可以通过链式调用来获取想要的信息。

$('a').each((i, el) => {
  console.log($(el).attr('href'));
})

在这个例子中，我们使用了 each 方法来遍历a标签，在循环体内使用了attr() 方法获取每个a标签的链接信息。当然，类似于 text() 方法，也可以获取标签之间的文本信息。例如：

$('.summary').text();

总结

至此，我们已经讲解了 cheerio-fetch 的基本用法。cheerio-fetch 提供了通过 Node.js 从网络中获取 HTML 内容，并提供基于 jQuery 选择器的 HTML 解析工具的功能。它可以帮助我们轻松地遍历和解析 HTML 树，提取所需数据，帮助我们编写更加高效、简洁的代码。

代码示例：https://github.com/PigCute/cheerio-fetch-demo

以上是本文的全部内容，希望对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600555ff81e8991b448d3003