使用 Puppeteer 在网络抓取中用于不同类型数据的相同选择器答案

【问题标题】：same selector for different types data in web scraping using Puppeteer使用 Puppeteer 在网络抓取中用于不同类型数据的相同选择器
【发布时间】：2021-03-04 09:51:29
【问题描述】：

我是一名网络开发新手，最近开始编写代码。

我只熟悉HTML/CSS/JS & NODE。

我目前正在开发一个页面抓取项目并使用 puppeteer

问题 - 在这样的代码场景中↓ 不同类型的数据有相同的选择器。
（在这种情况下是 - a[rel="tag"] ）。

<span class="clip-link">

  <h4>Stars:</h4>
  <a href="https://www.media.com/ACTORS/darshan-raval/" rel="tag">Darshan Raval</a>,
  <a href="https://www.media.com/ACTORS/priyanka-chopra/" rel="tag">Priyanka Chopra</a>
  <h4>Singers:</h4>
  <a href="https://www.media.com/SINGERS/hardy-sandhu/" rel="tag">Hardy Sandhu</a>,
  <a href="https://www.media.com/SINGERS/amit-trivedi/" rel="tag">Amit Trivedi</a>,
</span>

或

<span class="clip-link">

  <h4>Stars:</h4>
  <a href="https://www.media.com/ACTORS/darshan-raval/" rel="tag">Darshan Raval</a>,
  <a href="https://www.media.com/ACTORS/priyanka-chopra/" rel="tag">Priyanka Chopra</a>,
  <a href="https://www.media.com/ACTORS/amir-khan/" rel="tag">Amir Khan</a>
  <h4>Singers:</h4>
  <a href="https://www.media.com/SINGERS/hardy-sandhu/" rel="tag">Hardy Sandhu</a>,
  <a href="https://www.media.com/SINGERS/amit-trivedi/" rel="tag">Amit Trivedi</a>,
</span>

我们可以在这些标签中看到的唯一共同区别在于它们的 URL，就在域名之后。

问题 -

如何根据 URL 差异选择和分类这些标签（“.com/ACTORS/.”或“.com/SINGERS.”）然后获取 innerText 存储它们的元素。

actors = ["Darshan Raval","Priyanka Chopra"]
singers = ["Hardy Sandhu","Amit Trivedi"]

或

actors = ["Darshan Raval","Priyanka Chopra","Amir Khan"]
singers = ["Hardy Sandhu","Amit Trivedi"]

“明星”和“歌手”的数量一直不同，所以我无法定义我固定的数组计数方法。

【问题讨论】：

在站点上运行完整的 HREF 抓取并循环遍历它们，并针对站点前缀进行正则表达式匹配，如果发生匹配，则获取 innerText 并构建两个新数组，一个用于演员和一个给歌手的。
这里好像没有问题。
@pguardiario 感谢您的回复。我已经编辑了问题，以便更清楚。
欢迎来到 SO！我在这里没有看到任何 puppeteer 代码或具体的尝试/示例。你能用你当前的代码澄清这个问题吗？谢谢。
@Avisha，我期待看到一个以问号结尾的句子，但它不在这里。

标签： javascript html node.js web-scraping puppeteer

【解决方案1】：

你可以试试这样的：

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

const html = `
  <!doctype html>
  <html>
    <head><meta charset='UTF-8'><title>Test</title></head>
    <body>
      <span class="clip-link">
        <h4>Stars:</h4>
        <a href="https://www.media.com/ACTORS/darshan-raval/" rel="tag">Darshan Raval</a>,
        <a href="https://www.media.com/ACTORS/priyanka-chopra/" rel="tag">Priyanka Chopra</a>,
        <a href="https://www.media.com/ACTORS/amir-khan/" rel="tag">Amir Khan</a>
        <h4>Singers:</h4>
        <a href="https://www.media.com/SINGERS/hardy-sandhu/" rel="tag">Hardy Sandhu</a>,
        <a href="https://www.media.com/SINGERS/amit-trivedi/" rel="tag">Amit Trivedi</a>,
      </span>
    </body>
  </html>`;

try {
  const [page] = await browser.pages();

  await page.goto(`data:text/html,${html}`);

  const data = await page.evaluate(() => {
    const tags = [...document.querySelectorAll('a[rel="tag"]')];
    return tags.reduce((persons, tag) => {
      const type = tag.pathname.split('/')[1];
      persons[type] ??= [];
      persons[type].push(tag.innerText);
      return persons;
    }, {});
  });
  console.log(data);
} catch (err) { console.error(err); } finally { await browser.close(); }

输出：

{
  ACTORS: [ 'Darshan Raval', 'Priyanka Chopra', 'Amir Khan' ],
  SINGERS: [ 'Hardy Sandhu', 'Amit Trivedi' ]
}

【讨论】：

非常感谢，您的帮助对我意义重大