Puppeteer 获取所有可见的纯文本，并找出每段文本所属的HTML标记或DOM元素

我知道如何获取页面上所有可见的纯文本：

const text=wait page.$eval（'*'，el=>el.innerText）

但是我还需要知道每段文本属于页面的哪个元素，我找不到方法来做到这一点。
您可以使用以下解决方案来获取包含标记名及其关联文本的对象数组：

const-example=wait-page.evaluate（（）=>{
返回Array.from（document.body.getElementsByTagName（'*'），e=>[…e.childNodes].filter（e=>
e、 节点类型===3
&&！['SCRIPT'，'STYLE']。包括（e.parentNode.tagName）
&&e.textContent.trim（）长度
)).flat（）.map（e=>({
标记名：e.parentNode.tagName，
text_content:e.textContent.trim（），
}));
});
console.log（示例[0]。标记_名称）；//DIV
console.log（示例[0]。文本内容）；//你好，世界！
在客户端，您可以通过使用来保持订单。下面是一个示例，示例内容来自：


const IGNORE=[“样式”，“脚本”]；
const walker=document.createTreeWalker（document.body，NodeFilter.SHOW_TEXT）；
常数对=[]；
let节点；
while（（node=walker.nextNode（））！==null）{
const parent=node.parentNode.tagName；
如果（忽略。包括（父项））{
继续；
}
const value=node.nodeValue.trim（）；
如果（value.length==0）{
继续；
}
push（[parent.toLowerCase（），value]）；
}
控制台日志（对）

区块：价格表
在这个测试中，web刮板需要刮取一个按块布局组织的价目表。具体而言，它必须：
提取所有产品（名称、说明和价格），同时跳过广告
只刮打折的产品
仅使用红色价格的产品

有一个ver参数（从1到5不等）用于显示不同的表格版本（具有不同的产品编号、最佳价格和广告位置）

此外，还提供了两个表格：

案例1（简单案例，产品和价格放在同一块）
案例2（复杂的案例，产品和价格分块）


对于测试，您可以使用以下示例链接。刮板机应使用同一项目充分刮取特定案例中的所有数据：








案例1
戴尔Latitude D610-1.73笔记本电脑无线电脑2 GHz英特尔奔腾M，1 GB DDR2 SDRAM，40 GB，Microsoft Windows XP Professional$239.95三星Chromebook（Wi-Fi，11.6英寸）1.7 GHz，2 GB DDR3 SDRAM，16 GB，Chrome$249.00最佳
价格！广告Apple MacBook Pro MD101LL/A 13.3英寸笔记本电脑（最新版本）2.5 GHz Intel Core i5，4 GB DDR3 SDRAM，500 GB串行ATA，Mac OS X v10.7 Lion$1099.99宏碁Aspire AS5750Z-4835 15.6英寸笔记本电脑（黑色）2 GHz奔腾B940，4 GB SDRAM，500 GB，Windows 7家庭高级64位$385.72最佳价格
价格！广告HP Pavilion g7-2010nr 17.3英寸笔记本电脑（黑色）2.3 GHz内核i3-2350M，6 GB SDRAM，640 GB，Windows 7 Home Premium 64位$549.99折扣7%华硕A53Z-AS61 15.6英寸笔记本电脑（摩卡）1.4 GHz A系列四核A6-3420M，4 GB DIMM，750 GB，Windows 7 Home Premium 64位$399.99
案例2
戴尔Latitude D610-1.73笔记本电脑无线电脑2 GHz英特尔奔腾M、1 GB DDR2 SDRAM、40 GB、Microsoft Windows XP专业版三星Chromebook（Wi-Fi，11.6英寸）1.7 GHz、2 GB DDR3 SDRAM、16 GB、ChromeadVertiseTapple MacBook Pro MD101LL/A 13.3英寸笔记本电脑（最新版本）2.5 GHz英特尔Core i5、4 GB DDR3 SDRAM、500 GB串行ATA、，Mac OS X v10.7 LionAcer Aspire AS5750Z-4835 15.6英寸笔记本电脑（黑色）2 GHz奔腾B940，4 GB SDRAM，500 GB，Windows 7 Home Premium 64位$239.95$249.00$1099.99$385.72广告HP Pavilion g7-2010nr 17.3英寸笔记本电脑（黑色）2.3 GHz内核i3-2350M，6 GB SDRAM，640 GB，Windows 7 Home Premium 64位华硕A53Z-AS61 15.6英寸笔记本电脑（摩卡）1.4 GHz A系列四核A6-3420M，4 GB DIMM，750 GB，Windows 7家庭高级64位$549.99折扣7%$399.99




你希望结果如何？@Aankhen：我真的不知道，我对木偶演员和Javascript都是新手。有什么方法可以迭代文档的结构，同时知道哪些文本是可见的，以及它属于哪个项目？本质上，我需要知道文本在哪个HTML标记中，比如标题、标题、超链接文本等。格兰特·米勒的回答还不够吗？@Aankhen：我还没有检查它是解析页面上的所有内容还是只解析部分项目，但它似乎确实有效。如果您有任何其他想法、方法或建议，我将非常感谢您的输入。从测试来看，这似乎将包括
脚本
元素，并排除包含文本和空元素的元素，例如
第1行
第2行
。这是您添加的所有可接受标记的白名单吗？（如果这是一个愚蠢的问题，很抱歉，我对JS很陌生）。呃，很抱歉，后来意识到我所说的是误导性的……问题不仅仅是关于
Foo
，而是任何内容混合的元素（文本和子元素一起）。看，例如。@Aankhen抓得好！更新。@VioletGiraffe我已经更新了我的答案，删除了有问题的列表。我对你的解决方案非常满意（谢谢！），直到我注意到它有时可以重新排序项目。请注意，上的“粗体”文本是如何在其后面的文本之后进行解析的：这可以避免吗？单词排序在我尝试做的事情中是非常重要的。我本想提出另一个答案，但后来我发现它也有同样的问题。我找到了一个用TreeWalker做的方法。请参阅更新的帖子。再次非常感谢，这很有效，代码更简单，速度至少是Xpath的两倍。我想知道JS还有多少不同的HTML解析器是现成的：）哈哈。杰出的