Puppeteer - 如何让 innerText 忽略孩子答案

【问题标题】：Puppeteer - How to get innerText ignoring childrenPuppeteer - 如何让 innerText 忽略孩子
【发布时间】：2021-05-13 23:11:53
【问题描述】：

我正在寻找 h3 的 innerText，但我想忽略嵌套跨度。

例子：

<h3>
    <span>NEW</span>
    Blog Article #69
</h3>

这是我当前的代码：

const title = await blogArticle.$eval(
    "h3",
    (el) => el.textContent
  );

NEWBlog Article #69

还尝试了 innerText 没有成功，我无法从 DOM 中删除 span。

【问题讨论】：

我不太确定，但你可以试试const elm = await page.$(".h3"); const text = await page.evaluate(elm => elm.textContent, elm[0]); console.log(text);。
这不是严格意义上的 Puppeteer 问题，因为您可以（并且应该）完全在 $eval 内的浏览器代码中解决它，如 JavaScript get textContent excluding children 中所述。正确的做法是遍历children，使用child.nodeType === Node.TEXT_NODE查找文本。

标签： javascript dom puppeteer

【解决方案1】：

只要 H3 不再包含任何标签，这将起作用

'use strict';

const puppeteer = require('puppeteer');

const html = `
<html>
    <body>
    <h3>
    <span>NEW</span>
    Blog Article #69
    </h3>    
  </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch({ headless : false});
  const page = await browser.newPage();
  await page.goto(`data:text/html,${html}`);
  const title = await page.$eval(
    "h3",
    (el) => el.innerHTML
  );

  const span = await page.$eval(
    "h3 span",
    (el) => el.innerText
  );

  var h3WithoutSpan = title.replace(`<span>${span}</span>`, "" ).trim();
  console.log("-->" + h3WithoutSpan);

  await browser.close();
})();

这将返回-->Blog Article

执行以下操作

获取H3的内部HTML
获取 span 的文本（假设这可以是其他词，而不仅仅是 NEW）
删除<span>NEW</span>，然后删除所有空格

【讨论】：