使用 Puppeteer 在 SPAN 数组中为 div ID 抓取文本

Question

我有这个 HTML：

<div id="ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV" class="modules-wrapper">
  <table>
    <tr>
      <td><div>  <span> -Master Scuba Diver </span> </div></td>
      <td><div>  <span> -Fish Identification </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Underwater Navigator </span> </div></td>
      <td><div>  <span> -EFR Primary Care with AED </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Search & Recovery Diver </span> </div></td>
      <td><div>  <span> -Deep Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Wreck Diver </span> </div></td>
      <td><div>  <span> -Divemaster </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -AWARE Coral Reef Conservation </span> </div></td>
      <td><div>  <span> -PADI Seal Team </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Bubblemaker </span> </div></td>
      <td><div>  <span> -Advanced Open Water Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Peak Performance Buoyancy Diver </span> </div></td>
      <td><div>  <span> -Scuba Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Rescue Diver </span> </div></td>
      <td><div>  <span> -Discover Scuba Diving </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -PADI Master Seal Team </span> </div></td>
      <td><div>  <span> -Project Aware </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Open Water Diver </span> </div></td>
      <td><div>  <span> -Adventure Diver </span> </div></td>
    </tr>
    <tr>
      <td><div>  <span> -Skin Diver </span> </div></td>
    </tr>
  </table>
</div>

我想获取每个 SPAN 中具有该 ID 的 DIV 的文本，并将每个文本元素作为数组返回，我该如何实现？ 我已经尝试了一切...

Answer 1

最简单的单线解决方案是使用page.$$eval收集页面上下文中的所有<span>元素 - 它在后台运行Array.from(document.querySelectorAll(selector)) 。 当它返回一个元素数组时，您可以使用Array.map对它们进行迭代，以最终获得每个元素的innerText 。

const spanTexts = await page.$$eval('span', elements => elements.map(el => el.innerText))
console.log(spanTexts)

在特定的<div>中，您可以使用通用选择器 ( * ) 在#id-name和span元素之间创建通配符。 您可以 在 MDN 上阅读有关如何自己创建 CSS 选择器的更多信息。

const spanTexts = await page.$$eval('#ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV * span', elements => elements.map(el => el.innerText))
console.log(spanTexts)

Answer 2

我找到了获取特定 ID 的解决方案，然后获取跨度中的文本

const spanTexts = await page.$$eval('#ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV span', elements => elements.map(el => el.innerText))

非常感谢@thedavidbarton