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

Question

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

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

谢谢！

Answer 1

这一切都归功于Greg W的答案，因为我这个答案是基于他的代码，但我发现对于一个网站没有内联样式或脚本标签，它通常更容易使用：

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

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

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

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

更新：

阅读完这篇关于

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;

}

这可以拆分为单词数组，单词计数；无论如何，真的。

Answer 4

选择页面上的所有文本：

window.getSelection().selectAllChildren(document.body)

现在您可以将此文本作为字符串获取：

const pageText = window.getSelection().toString()