Question

使用适当的选择器，评估函数和innerText属性，我尝试提取div的内容，例如：

<div class="abc">Interesting stuff</div>

但是css类将内容转换为大写：有趣的东西

innerText属性返回大写而不是“原始”文本是否正常？有没有办法获取此“原始”文本？

Answer 1

您可以使用以下属性进行操作：

innerHTML将内容解析为HTML，因此需要更长的时间。
textContent使用纯文本，不解析HTML，并且速度更快。

示例：

内部HTML：

const text = await page.$eval('.abc', elem => elem.innerHTML); // returns 'Interesting stuff'

文本内容：

const text = await page.$eval('.abc', elem => elem.textContent); // returns 'Interesting stuff'

通过API docs：

innerHTML返回HTML或XML片段是根据当前   元素的内容，因此返回的标记和格式   片段可能与原始页面标记不匹配。

textContent返回节点中的每个元素。相比之下，innerText知道样式，不会返回“隐藏”元素的文本。此外，由于innerText考虑了CSS样式，因此读取innerText的值会触发重排以确保最新的计算样式。（重排在计算上可能会很昂贵，因此应尽可能避免。）

由于CSS，Puppeteer返回大写的innerText值

1 个答案: