0

0

聊聊使用Node.js + Cheerio 怎么进行数据抓取

青灯夜游

青灯夜游

发布时间:2022-08-01 20:23:29

|

2913人浏览过

|

来源于掘金社区

转载

要获取数据,你必须求助于网络抓取。本篇文章就来介绍一下如何使用node和cheerio抓取网站数据,希望对大家有所帮助!

聊聊使用Node.js + Cheerio 怎么进行数据抓取

在我们开始之前,你需要遵守当地的法纪法规,不可随意抓取未经允许公开的数据。

先决条件

以下是本教程需要的一些东西:

  • 你需要安装Node.js。如果你没有 Node,只需确保从Node.js 下载页面为你的系统下载它(https://nodejs.dev/download/)
  • 你需要在你的机器上安装一个文本编辑器,比如VSCodeAtom
  • 你至少应该对 JavaScript、Node.js 和文档对象模型 (DOM) 有基本的了解。

什么是 Cheerio?

Cheerio 是一个在 Node.js 中解析 HTML 和 XML 的工具,在 GitHub 上非常受欢迎,拥有超过23k 的 star 。

它快速、灵活且易于使用。由于它实现了 JQuery 的一个子集,如果你已经熟悉 JQuery,那么很容易开始使用 Cheerio。

Cheerio 和 Web 浏览器之间的主要区别在于,cheerio 不生成视觉渲染、加载 CSS、加载外部资源或执行 JavaScript。它只是解析标记并提供用于操作生成的数据结构的 API。这就解释了为什么它也非常快——cheerio 文档。

如果你想使用cheerio 来抓取网页,您需要首先使用axiosnode-fetch等包来获取标记。

如何使用 Cheerio 在 Node 中抓取网页

在此示例中,我们将抓取此 Wikipedia 页面上列出的所有国家和其他司法管辖区的ISO 3166-1 alpha-3 代码。它位于ISO 3166-1 alpha-3页面的当前代码部分下。

这是国家/司法管辖区列表及其相应代码的样子:

1.png

第 1 步 - 创建工作目录

在此步骤中,您将通过在终端上运行以下命令为您的项目创建一个目录。该命令将创建一个名为learn-cheerio. 如果你愿意,你可以给它一个不同的名字。

mkdir learn-cheerio

learn-cheerio成功运行上述命令后,您应该能够看到一个名为 created 的文件夹。

在下一步中,您将在您喜欢的文本编辑器中打开刚刚创建的目录并初始化项目。

第 2 步 - 初始化项目

在此步骤中,您将导航到项目目录并初始化项目。在您喜欢的文本编辑器中打开您在上一步中创建的目录,并通过运行以下命令来初始化项目。

npm init -y

成功运行上述命令将package.json在项目目录的根目录下创建一个文件。

在下一步中,您将安装项目依赖项。

第 3 步 - 安装依赖项

在此步骤中,您将通过运行以下命令来安装项目依赖项。这将需要几分钟,所以请耐心等待。

npm i axios cheerio pretty

成功运行上述命令将在字段package.json下的文件中注册三个依赖项。dependencies第一个依赖是axios,第二个是cheerio,第三个是pretty

axios是一个非常流行的node0,可以在 node 和浏览器中运行。我们需要它,因为cheerio 是一个标记解析器。

为了让 Cheerio 解析标记并抓取您需要的数据,我们需要axios用于从网站获取标记。如果您愿意,可以使用另一个 HTTP 客户端来获取标记。它不一定是axios.

node1是用于美化标记的 npm 包,以便在终端上打印时可读。

在下一部分中,您将检查将从中抓取数据的标记。

第 4 步 - 检查您要抓取的网页

在从网页中抓取数据之前,了解页面的 HTML 结构非常重要。

在此步骤中,您将检查要从中抓取数据的网页的 HTML 结构。

导航到Wikipedia 上的node2页面。在“当前代码”部分下,有一个国家列表及其相应的代码。CTRL + SHIFT + I您可以通过按chrome 上的组合键或右键单击然后选择“检查”选项来打开 DevTools 。

这是我在 chrome DevTools 中的列表:

2.png

在下一节中,您将编写用于抓取网页的代码。

第 5 步 - 编写代码以抓取数据

在本节中,你将编写用于抓取我们感兴趣的数据的代码。首先运行以下将创建app.js文件的命令。

touch app.js

成功运行上述命令将app.js在项目目录的根目录下创建一个文件。

像任何其他 Node 包一样,在开始使用它们之前,你必须首先require axioscheerio和。你可以通过在刚刚创建pretty的文件顶部添加下面的代码来做到这一点。app.js

Play.ht
Play.ht

根据文本生成多种逼真的语音

下载
const axios = require("axios");
const cheerio = require("cheerio");
const pretty = require("pretty");

在我们编写用于抓取数据的代码之前,我们需要学习cheerio. 我们将解析下面的标记并尝试操作生成的数据结构。这将帮助我们学习 Cheerio 语法及其最常用的方法。

下面的标记是ul包含我们元素的li元素。

const markup = `
  • Mango
  • Apple
`;

将上述变量声明添加到app.js文件中

如何在 Cheerio 中加载标记

cheerio你可以使用该cheerio.load方法加载标记。该方法将标记作为参数。它还需要另外两个可选参数。如果你有兴趣,可以node3中阅读有关它们的更多信息。

下面,我们传递第一个也是唯一需要的参数,并将返回值存储在$变量中。我们使用该变量是因为cheerio 与node4$的相似性。如果你愿意,可以使用不同的变量名。node5

将以下代码添加到你的app.js文件中:

const $ = cheerio.load(markup);
console.log(pretty($.html()));

如果你现在通过在终端上app.js运行命令来执行文件中的代码node app.js,你应该能够在终端上看到标记。这是我在终端上看到的:

3.png

如何在 Cheerio 中选择元素

Cheerio 支持大多数常见的 CSS 选择器,例如classidelement选择器等。在下面的代码中,我们选择带有类的元素fruits__mango,然后将所选元素记录到控制台。将以下代码添加到你的app.js文件中。

const mango = $(".fruits__mango");
console.log(mango.html()); // Mango

如果你使用命令执行,上述代码行将Mango在终端上记录文本。app.js``node app.js

如何在 Cheerio 中获取元素的属性

您还可以选择一个元素并获取特定属性,例如classid或所有属性及其对应值。

将以下代码添加到你的app.js文件中:

const apple = $(".fruits__apple");
console.log(apple.attr("class")); //fruits__apple

上面的代码将登录fruits__apple终端。fruits__apple是所选元素的类。

如何循环遍历 Cheerio 中的元素列表

Cheerio 提供了.each循环遍历多个选定元素的方法。

下面,我们选择所有元素并使用该方法li循环遍历它们。.each我们在终端上记录每个列表项的文本内容。

将以下代码添加到你的app.js文件中。

const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(function (idx, el) {
  console.log($(el).text());
});
// Mango
// Apple

上面的代码会记录2,也就是列表项的长度,执行完代码后会在终端上显示文字Mango和。Apple``app.js

如何在 Cheerio 中将元素附加或添加到标记中

Cheerio 提供了一种将元素附加或附加到标记的方法。

append方法会将作为参数传递的元素添加到所选元素的最后一个子元素之后。另一方面,prepend将在选定元素的第一个子元素之前添加传递的元素。

将以下代码添加到你的app.js文件中:

const ul = $("ul");
ul.append("
  • Banana
  • "); ul.prepend("
  • Pineapple
  • "); console.log(pretty($.html()));

    在向标记添加和添加元素之后,这是我登录$.html()终端时看到的内容:

    4.png

    这些是 Cheerio 的基础知识,可以帮助你开始网络抓取。 要从 Wikipedia 抓取我们在本文开头描述的数据,请将以下代码复制并粘贴到app.js文件中:

    // Loading the dependencies. We don't need pretty
    // because we shall not log html to the terminal
    const axios = require("axios");
    const cheerio = require("cheerio");
    const fs = require("fs");
    
    // URL of the page we want to scrape
    const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
    
    // Async function which scrapes the data
    async function scrapeData() {
      try {
        // Fetch HTML of the page we want to scrape
        const { data } = await axios.get(url);
        // Load HTML we fetched in the previous line
        const $ = cheerio.load(data);
        // Select all the list items in plainlist class
        const listItems = $(".plainlist ul li");
        // Stores data for all countries
        const countries = [];
        // Use .each method to loop through the li we selected
        listItems.each((idx, el) => {
          // Object holding data for each country/jurisdiction
          const country = { name: "", iso3: "" };
          // Select the text content of a and span elements
          // Store the textcontent in the above object
          country.name = $(el).children("a").text();
          country.iso3 = $(el).children("span").text();
          // Populate countries array with country data
          countries.push(country);
        });
        // Logs countries array to the console
        console.dir(countries);
        // Write countries array in countries.json file
        fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
          if (err) {
            console.error(err);
            return;
          }
          console.log("Successfully written data to file");
        });
      } catch (err) {
        console.error(err);
      }
    }
    // Invoke the above function
    scrapeData();

    通过阅读代码,你了解正在发生的事情吗?如果没有,我现在将详细介绍。我还对每一行代码进行了注释,以帮助你理解。

    在上面的代码中,我们需要文件顶部的所有依赖项,app.js然后我们声明了scrapeData函数。在函数内部,使用axios. 然后将我们需要抓取的页面的获取 HTML 加载到cheerio.

    国家/地区列表及其对应iso3代码嵌套在一个div具有 . 类的元素中plainlistli元素被选中,然后我们使用该方法循环遍历它们.each。每个国家的数据都被抓取并存储在一个数组中。

    使用命令运行上述代码后node app.js,将抓取的数据写入countries.json文件并打印在终端上。这是我在终端上看到的部分内容:

    5.png

    结论

    感谢你阅读本文!我们已经介绍了使用cheerio. 如果你想更深入地了解并完全了解其工作原理,可以前往node6。

    更多node相关知识,请访问:node7!

    相关专题

    更多
    js获取数组长度的方法
    js获取数组长度的方法

    在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

    536

    2023.06.20

    js刷新当前页面
    js刷新当前页面

    js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

    372

    2023.07.04

    js四舍五入
    js四舍五入

    js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

    706

    2023.07.04

    js删除节点的方法
    js删除节点的方法

    js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

    470

    2023.09.01

    JavaScript转义字符
    JavaScript转义字符

    JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

    388

    2023.09.04

    js生成随机数的方法
    js生成随机数的方法

    js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

    989

    2023.09.04

    如何启用JavaScript
    如何启用JavaScript

    JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

    652

    2023.09.12

    Js中Symbol类详解
    Js中Symbol类详解

    javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

    537

    2023.09.20

    笔记本电脑卡反应很慢处理方法汇总
    笔记本电脑卡反应很慢处理方法汇总

    本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

    1

    2025.12.25

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Node.js 教程
    Node.js 教程

    共57课时 | 7.2万人学习

    【web前端】Node.js快速入门
    【web前端】Node.js快速入门

    共16课时 | 1.9万人学习

    Node.js-前端工程化必学
    Node.js-前端工程化必学

    共19课时 | 3万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号