javascript - 有没有办法用 JS 从渲染页面中获取所有文本？

Question

是否有一种（对用户来说不显眼）方法来使用 Javascript 获取页面中的所有文本？我可以获取 HTML、解析它、删除所有标签等，但我想知道是否有办法从已经渲染的页面中获取文本。

澄清一下，我不想从选择中抓取文本，我想要整个页面。

谢谢！

Answer 1

所有功劳归功于Greg W 的回答，因为我将此答案基于他的代码，但我发现对于没有内联样式或脚本标签的网站，它通常更易于使用：

var theText = $('body').text();

因为这会抓取所有标签中的所有文本，而无需手动设置每个可能包含文本的标签。

此外，如果您不小心，手动设置标签可能会在输出中创建重复的文本，因为每个函数通常必须检查包含在其他标签中的标签，这会导致它两次抓取相同的文本。使用一个包含我们想要从中获取文本的所有标签的选择器可以规避这个问题。

需要注意的是，如果正文标签中有内联样式或脚本标签，它也会抓取这些标签。

更新：

在阅读了这篇关于innerText我现在认为获取文本的绝对最佳方法是纯 ol vanilla js 的文章后：

document.body.innerText

事实上，这不是可靠的跨浏览器，但在受控环境中它会返回最佳结果。阅读文章了解更多详情。

此方法以通常更易读的方式格式化文本，并且在输出中不包含样式或脚本标记内容。

Answer 2

我想你可以做这样的事情，如果你不介意加载 jQuery。

var theText;
$('p,h1,h2,h3,h4,h5').each(function(){
  theText += $(this).text();
});

完成后，“theText”应该包含页面上的大部分文本。添加我可能遗漏的任何相关选择器。

Answer 3

作为对 Greg W 答案的改进，您还可以删除“未定义”，并删除任何数字，因为它们不是单词。

function countWords() {

    var collectedText;

    $('p,h1,h2,h3,h4,h5').each(function(index, element){
        collectedText += element.innerText + " ";
    });   

    // Remove 'undefined if there'
    collectedText = collectedText.replace('undefined', '');

    // Remove numbers, they're not words
    collectedText = collectedText.replace(/[0-9]/g, '');

    // Get
    console.log("You have " + collectedText.split(' ').length + " in your document.");
    return collectedText;

}

这可以拆分为单词数组，单词计数；不管怎样，真的。