Node Js & Puppeteer - 如何选择包裹在 Anchor 标签内的文本

Posted 2023-03-07

【中文标题】Node Js & Puppeteer - 如何选择包裹在 Anchor 标签内的文本

【英文标题】：Node Js & Puppeteer - How to select text wrapped inside an Anchor tag

【发布时间】：2020-07-23 07:33:33

【问题描述】：

我现在正在做一个项目，遇到了一个错误，需要你的帮助！

基本上，我正在尝试选择以下锚标记内的换行文本

<a href="..." class="productDetailsLink js-productName">Product Name</a>

这是我当前的代码：

 await page.waitForSelector('div > div > div > div > div > a[class = "productDetailsLink js-productName"')
        .then(() => page.evaluate(() => 
            const itemArray = [];
            const itemNodeList = document.querySelectorAll('div > div > div > div > div > a[class = "productDetailsLink js-productName"');
            

            itemNodeList.forEach(item => 
                const itemTitle = item.querySelectorAll('div > div > div > div > div > a[class = "productDetailsLink js-productName"').innerText;
                console.log(itemTitle);
            )
         ))

但是，我没有运气。我已经没有关于如何抓取此类文本的想法了。

【参考方案1】：

.innerText 为我工作（不是 .text 或 .innerhtml）

信用：在这里看到它：https://learnscraping.com/nodejs-web-scraping-with-puppeteer/

对于选择器：选择 Inspect and Copy -> JS path.

下面我把“高级帮助”链接的JS路径复制到这里：

document.querySelector("#mdhelp-tabs > li.float-right > a")

是的，它带有“document.querySelector”并且可以粘贴到 puppeteer Node.js 代码中

【参考方案2】：

如果这些类属性对于特定锚<a href="..." class="productDetailsLink js-productName">Product Name</a> 是唯一的，则可以使用以下方法：

await page.evaluate(() => 
 let anchorText = document.querySelector('a.productDetailsLink.js-productName').innerHTML;
 console.info("anchorText::", anchorText);
);

/*OR another way*/
await page.$eval('a.productDetailsLink.js-productName', e => e.innerHTML);

如果有锚列表：

await page.evaluate(() => 
 let anchorList = document.querySelectorAll('a.productDetailsLink.js-productName');
 anchorList.forEach(e => 
  let anchorText = e.innerHTML;
  console.info("anchorText::", anchorText);
 );
);

【讨论】：

@BrógánMcShane 非常欢迎 :)。如果它有助于解决问题，请考虑接受并支持答案。 Accpting answers how?

【参考方案3】：

不确定 Puppeteer 是如何工作的，但我在使用 cheerio (https://www.npmjs.com/package/cheerio) 和 phantom 解析抓取的 html 方面取得了巨大成功。

我认为您可以使用 phatom 之类的 puppeteer 进行抓取，并对抓取的 HTML 内容使用cheerio，如下所示：

const cheerio = require('cherio');
const $ = cheerio.load(content); // content is your HTML scraped
result = $('. productDetailsLink').text();