以前老俊总是通过PHP脚本来抓取网页数据，近几年，得益于node的发展，老俊越多越多的使用了node技术栈来做爬虫，据统计，使用nodejs来爬取数据已经成为了从网站提取数据的最流行的方法之一。

想象一下，您想要创建一家在线服装商店，但您不确定要在网站上放置什么衣服。网页抓取可以拯救您！这就像有一个特殊的工具，可以去其他网上商店，查看他们的衣服，并带回重要信息，例如衣服的名称、它们的外观以及它们的价格。该工具可以帮助您从不同的商店收集所有这些详细信息，以便在您的网站上使用它们。这就像从其他地方借用一些信息来帮助建立自己的商店一样。 网络抓取意味着从网站获取数据。然后收集这些数据并将其转换为更有用的格式，例如将其放入电子表格中或以称为 API 的特殊方式使其可供使用。这就像从网站中挑选出重要的内容并使人们更容易使用一样。

我们如何使用Node js 进行网页抓取呢？本篇文件介绍如何使用 Node.js 构建 JavaScript 网络抓取工具。

先决条件

• Node.js 与 npm
• 支持 JavaScript 的 IDE。我正在使用可视化代码编辑器，老俊无条件选择vscode

本教程基于 Node.js 18.12 和 npm 8.19

搭建步骤

第 1 步：设置 Node.js 项目

mkdir web-scraper
cd web-scraper
npm init -y

此命令将为您设置一个新的 npm 项目。请注意，需要 -y 标志来使 npm 初始化默认项目而不经过交互过程。如果省略 -y 标志，系统会在终端中询问您一些问题。web-scrapper 现在应该包含如下所示的 package.json：我打算在我的项目中使用其他 Node.js 包，即 nodemon、express、axios 和 Cheerio。

• express：这是一个广泛认可的 Node.js Web 框架，可以简化构建 Web 应用程序的过程。
• axios：一个非常流行的 JavaScript 库，用于发出 HTTP 请求，促进流畅的网络通信。
• nodemon：为了增强我的开发过程，我将使用nodemon。该工具持续监控源代码更改并自动重新启动服务器以简化测试。
• cheerio: 为了在服务器端执行网络爬虫，我将使用 cheerio。这是一种 JavaScript 技术，以其在解析和处理 HTML 内容方面的实用性而闻名。如需深入了解，请参阅 cheerio.js.org/docs/intro 上的官方文档。

npm install express axios nodemon cheerio

之后，我们需要在 package.json 文件中指定启动 nodemon 服务器，如下所示

创建 Index.js 文件

随后，在终端中输入命令“npm start”。此操作将启动您的服务器。通过在网络浏览器中导航到“localhost:5000”，您将收到一条“欢迎🙌”消息，确认您的服务器已启动并正在运行。

步骤 3：启动网页抓取过程

这里我们将举例从这个网站提取数据：www.octaveclothing.com/men在此，我们将提取产品标题、描述和价格等信息。通过将以下两行代码添加到 index.js 来导入 cheerio 和 axios ：

// index.js 

const cheerio = require("cheerio")
const axios = require("axios")

现在借助 axios 下载目标网站数据，如下所示：

// index.js

await axios("https://www.octaveclothing.com/men").then((response) => {
  const html_data = response.data;
})

现在，我们已将网页数据加载到 html_data 变量中。之后，我们将在 Cheerio 的帮助下加载这些数据。

const $ = cheerio.load(html_data);

Cheerio load() 方法接受字符串形式的 HTML 内容。您应该调用 Cheerio 变量 ，因为Cheerio与jQuery的语法基本相同。<br/>我们可以使用Cheerio的类来选择HTML元素：consthtmlElement=，因为 Cheerio 与 jQuery 的语法基本相同。<br />我们可以使用 Cheerio 的类来选择 HTML 元素：_const htmlElement =，因为Cheerio与jQuery的语法基本相同。<br/>我们可以使用Cheerio的类来选择HTML元素：c​onsthtmlElement=(“.elementClass”)_

async function cryptopriceScraper() {
    const url = "https://www.octaveclothing.com/men";
    const result = [];
    await axios(url).then((response) => {
      const html_data = response.data;
      const $ = cheerio.load(html_data);
      
      const keys = ["Title","Description","Price"];
      const selectedElem = ".views-infinite-scroll-content-wrapper > .row > .col-6 > .product-7 > .product-body"
      
      $(selectedElem).each((parentIndex, parentElem) => {
        let keyIndex = 0;
        const data = {};
        if (parentIndex) {
          $(parentElem)
          .children()
          .each((childId, childElem) => {
            const value = $(childElem).text();
              if (value) {
                data[keys[keyIndex]] = value;
                keyIndex++;
              }
            });
          result.push(data);
        }
      });
    });
    return result;
  }

此 Node.js 片段从目标网页（即 ( www.octaveclothing.com/men ）中选择所有产品卡主体。然后，它迭代所有 HTML 元素。对于每个产品卡片，它都会爬取产品的标题、描述和价格现在，我们创建一个 get 类型的 API 并在其中调用该函数。

app.get("/data-scrapper", async (req, res) => {
    try {
      const data = await cryptopriceScraper();
      return res.status(200).json({
        result: data,
      });
    } catch (err) {
      return res.status(500).json({
        err: err.toString(),
      });
    }
});

现在，在浏览器中使用此 API 接口时，先显示我们需要爬取的数据并且以json格式显示。我们拿到JSON后，就可以进行二次加工或者导出，比如可以直接导出到excel。

总结

在这个项目中，我们了解了如何从在线商店的网站收集信息。您还掌握了使用 Cheerio 来理解和修改 HTML 元素的窍门。现在，有了这些知识，我们就可以从不同的网站抓取数据。请记住，在开始抓取网站之前，请先检查一下他们的网页结构，有的网页采用的是Spa模式，这种就会比较难抓取到，但借助更高级的工具如poputeer我们还是可以抓取到的。