如何在浏览器中选择所有 *renderable* 文本元素答案

【问题标题】：How to select all *renderable* text elements in browser如何在浏览器中选择所有 *renderable* 文本元素
【发布时间】：2015-05-24 08:53:57
【问题描述】：

如何选择浏览器文档中所有可见的可渲染 HTML 文本节点？

换句话说，我如何获取可以通过脚本遍历的 DOM 节点列表，以便按文档顺序获取用户在浏览器中实际可见的文本？

我想依靠浏览器告诉我构成当前可见的可渲染文本的节点。我不知道从哪里开始。帮忙？

【问题讨论】：

标签： javascript html dom browser cross-browser

【解决方案1】：

这很棘手，但这是我想出的：

function traverse(o) {
  var a = [];
  [].forEach.call(o.childNodes, function(val) {
    if(val.nodeType===3) {
      if(val.nodeValue.trim()>'') a.push(val);
    }
    else {
      var style= getComputedStyle(val);
      if(val.tagName!=='NOSCRIPT' && 
         style.getPropertyValue('display')!=='none' &&
         style.getPropertyValue('visibility')!=='hidden' &&
         style.getPropertyValue('opacity')!=='0' &&
         style.getPropertyValue('color')!==style.getPropertyValue('background-color')
        ) {
        a= a.concat(traverse(val));
      }
    }
  });
  return a;
} //traverse

var textNodes= traverse(document.body);

Working Fiddle

这不检查文本节点是否隐藏在其他元素后面或者它们是否绝对定位在屏幕外。

【讨论】：

如何检测和删除隐藏内容？
@dandavis，现已更新，但我可能忽略了其他内容。
在这个页面上的 Chrome 控制台中运行它，它似乎通常可以工作，但我注意到 textNodes 数组的第 0 个元素有文本 '<div id="noscript-padding">'，它来自 @987654326 @ 元素。那可能不应该在那里......
哈，总有一些东西。现在更新了，另外我添加了一个额外的测试来查看字体颜色是否与其背景颜色相同。
不错的递归解决方案。如果我正确阅读了这个问题，我会这样做，尽管我很想只使用 jQuery 来确定 visibility

【解决方案2】：

你应该可以在 1 行 JavaScript 中做到这一点：

document.querySelector("body").innerText

【讨论】：

那不是也能抓取隐藏的内容吗？
@dandavis according to MDN: "innerText 知道样式，不会返回隐藏元素的文本"
@dave：您是否碰巧知道它是否在所有浏览器中都以这种方式工作（不从隐藏元素返回任何文本）？ MDN 只记录了对所有市长（桌面）浏览器的基本支持，但没有说明它是否以完全相同的方式实现。此外，据我所知，MDN 页面上链接的规范没有提及隐藏元素。
支持 MDN 报价。但是，我认为 OP 想要一个文本节点列表而不是完整的 innerText。
@dave，这不是将文本作为大字符串抓取吗？我希望我的问题很清楚我不想要一串文本。我想要 nodes 字符串，当按顺序处理时，它包含文本字符串。