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

前言

在前端开发中，爬虫已经成为一个不可或缺的技术手段。而 recrawler-spa 就是一款优秀的模拟浏览器爬虫库。它可以模拟浏览器的行为，使用它可以方便的进行页面的数据抓取。本文将详细介绍 recrawler-spa 的使用方法。

安装

首先，需要安装 recrawler-spa，我们可以通过 npm 命令进行安装：

npm install recrawler-spa

使用

简单示例

下面是一个简单的示例，它可以用 recrawler-spa 抓取百度首页的 DOM。

const recrawler = require("recrawler-spa");

recrawler.launch("https://www.baidu.com", async (page) => {
  const links = await page.$$eval("a", (as) => as.map((a) => a.href));
  console.log(links);
  await page.close();
});

其中，launch 函数是 recrawler-spa 的核心方法。它用于启动一个浏览器实例，并打开指定的网页。回调函数中的 page 变量是一个浏览器页面对象，我们可以通过它来操作网页上的 DOM。

在这个示例中，我们使用了 $$eval 方法，它接收一个 CSS 选择器和一个函数作为参数。这个方法会在页面上查找所有匹配选择器的元素，然后将它们作为参数传递给函数。函数需要返回一个结果，$$eval 方法会把所有结果合并为一个数组并返回。

等待特定元素出现

如果一个页面需要异步加载，那么我们需要等待这个页面加载完成后再进行后续的操作。 recrawler-spa 提供了一种方便的方式来等待特定元素出现，这种方式就是使用 waitFor 方法。

下面是一个使用 waitFor 方法的示例，它会等待知乎首页中的“更多”按钮出现后，再点击这个按钮。

-- -------------------- ---- -------
----- --------- - -------------------------

----------------------------------------- ----- ------ -- -
  ----- ---------------------------------
  ----- -------------------------------
  ----- ---------------------------------
  ----- -------------------------------
  ----- -------------
---

在这个示例中，我们先使用 waitFor 方法等待“更多”按钮出现，然后通过 click 方法点击这个按钮。接着，我们再等待“日报”按钮出现并点击它。最后，我们关闭浏览器页面。

使用 page.evaluate 方法

如果需要在页面上执行一段自定义的 JavaScript 代码，并且需要从执行结果中获取数据，那么我们可以使用 page.evaluate 方法。

下面是一个使用 evaluate 方法的示例，它会在知乎首页中执行一段自定义的 JavaScript 代码，获取当前用户的昵称。

-- -------------------- ---- -------
----- --------- - -------------------------

----------------------------------------- ----- ------ -- -
  ----- -------- - ----- ---------------- -- -
    ----- ------ - -----------------------------------------------
    ----- -------- - ----------------------------------
    ----- ---------- - --------------------------------------
    ------ ----------------------------
  ---
  ----------------------
  ----- -------------
---

在这个示例中，我们首先通过 querySelector 方法获取到页面上的用户信息菜单。然后，我们通过 innerText 方法获取到了用户名字，并去除了字符串两端的空格。

处理多个页面

通常情况下，我们需要处理多个页面，我们可以在 launch 方法的第二个参数中返回一个数组，这个数组中的每一个元素代表了一个页面。我们可以使用 page.on 方法为每个页面绑定特定的事件回调函数。

下面是一个处理多个页面的示例，它会在百度首页和知乎首页中分别抓取页面标题。

const recrawler = require("recrawler-spa");

recrawler.launch(["https://www.baidu.com", "https://www.zhihu.com"], async (page) => {
  await page.waitForSelector("title");
  const title = await page.title();
  console.log(title);
  await page.close();
});

在这个示例中，我们使用了 waitForSelector 方法等待页面标题出现后，使用 title 方法获取到了页面的标题。接着，我们关闭了页面。

总结

在本文中，我们详细介绍了 recrawler-spa 的使用方法，并提供了一些示例代码。希望本文对你有所帮助。如果你有任何问题或意见，欢迎留言！

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

npm 包 recrawler-spa 使用教程

前言

安装

使用

简单示例

等待特定元素出现

使用 page.evaluate 方法

处理多个页面

更多方法和属性

总结

纠错反馈