[英]Scrape text in SPAN array for div ID using Puppeteer
我有這個 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 的文本,並將每個文本元素作為數組返回,我該如何實現? 我已經嘗試了一切...
最簡單的單線解決方案是使用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)
我找到了獲取特定 ID 的解決方案,然后獲取跨度中的文本
const spanTexts = await page.$$eval('#ctl00_ctl00_ctl00_cphMain_cphMiddle_cphCenterColumn_uctDiveInfoDisplay_TabContainer1_tabScubeCoursesOffered_ScubaCoursesViewDIV span', elements => elements.map(el => el.innerText))
非常感謝@thedavidbarton
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.