Question

我正在寻找一种使用 puppeteer来以下列方式有效地抓取格式化信息的方法。 假设我在网站上列出了以下内容：

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

如何检索名称（名称1，名称2和名称3？）的信息？

我曾尝试将它们装配到一个对象中，然后再装配成一个数组，但是我仍然对如何处理它感到困惑。

const listOfStuff = document.getElementById('list').getElementsByClassName('itemResult')

Answer 1

我认为与puppeteer API无关。在现代浏览器（ES6）上，转换为数组很简单，然后只需映射它即可。请注意，我假设nameToRetrieve仅出现在您要检索的内容中，因此无需获取"list"。

var names = Array.from(document.getElementsByClassName("nameToRetrieve")).map(x => x.innerHTML);
console.log(names)

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

Answer 2

在puppeteer中，此任务有一种特殊的便捷方法page.$$eval：

let result = await page.$$eval('.nameToRetrieve', names => names.map(name => name.textContent));
console.log(result);

此方法在页面内运行Array.from（document.querySelectorAll（selector））并将其作为第一个参数传递给pageFunction。

结果将是：

[ ' Name 1 ', ' Name 2 ', ' Name 3 ' ]

如何使用puppeteer在<div>列表内抓取

2 个答案: