获取网站上的所有可见文本 JavaScript

在进行网站爬取或者数据分析时，有时需要获取网站上的所有可见文本。本文将介绍如何使用 JavaScript 实现此操作。

方法一：使用 document.body.innerText

document.body.innerText 是一种快速获取页面所有可见文本的方法。这个方法将返回一个字符串，其中包含所有文本内容，不包含元素标记。

const allText = document.body.innerText;
console.log(allText);

但是，这个方法有一些局限性，比如：

• 它会将 script、style、head 标签中的文本信息忽略掉。
• 如果存在大量的空行或者空格，它可能会返回大量的空白字符。

方法二：遍历 DOM 树

如果我们希望获取页面上的每一个标签中的文本信息，可以使用 DOM 遍历方法。下面是一个示例代码，可以获取页面上的所有文本。

function getTextNodes(node) {
  if (node.nodeType == 3) {
    return [node];
  }
  var nodes = node.childNodes;
  var textNodes = [];
  for (var i = 0; i < nodes.length; i++) {
    textNodes = textNodes.concat(getTextNodes(nodes[i]));
  }
  return textNodes;
}

function getAllText() {
  var textNodes = getTextNodes(document.body);
  var allText = "";
  for (var i = 0; i < textNodes.length; i++) {
    allText += textNodes[i].nodeValue;
  }
  return allText;
}

console.log(getAllText());

这个方法会遍历 DOM 树中的所有节点，并将其中的文本信息统一返回。需要注意的是，这个方法会将所有的空行和空格都保留下来。

代码片段

下面是一个获取网站上的所有可见文本的 JavaScript 代码片段：

function getTextNodes(node) {
  if (node.nodeType == 3) {
    return [node];
  }
  var nodes = node.childNodes;
  var textNodes = [];
  for (var i = 0; i < nodes.length; i++) {
    textNodes = textNodes.concat(getTextNodes(nodes[i]));
  }
  return textNodes;
}

function getAllText() {
  var textNodes = getTextNodes(document.body);
  var allText = "";
  for (var i = 0; i < textNodes.length; i++) {
    allText += textNodes[i].nodeValue;
  }
  return allText;
}

console.log(getAllText());

这个方法可以获取页面上的所有文本信息，包括隐藏的文本和注释。如果需要过滤掉注释和隐藏的文本，可以在 getTextNodes 函数中加上过滤条件。