查找 HTML 页面中的所有文本节点

IT技术 javascript html
2021-01-28 15:51:07

对于这个问题，我需要找到特定节点下的所有文本节点。我可以这样做：

function textNodesUnder(root){
  var textNodes = [];
  addTextNodes(root);
  [].forEach.call(root.querySelectorAll('*'),addTextNodes);
  return textNodes;

  function addTextNodes(el){
    textNodes = textNodes.concat(
      [].filter.call(el.childNodes,function(k){
        return k.nodeType==Node.TEXT_NODE;
      })
    );
  }
}

然而，鉴于使用 XPath 可以简单地查询.//text()并使用它完成这一事实，这似乎不够优雅。

在 IE9+、Safari5+、Chrome19+、Firefox12+、Opera11+ 上获取 HTML 文档中特定元素下所有文本节点的最简单方法是什么？

“最简单”被粗略地定义为“高效且简短，无需打高尔夫球”。

2个回答

基于@kennebec 的回答，对相同逻辑的一个稍微更严格的实现：

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

但是，使用更快、更紧凑、更优雅的方式createTreeWalker，浏览器会为您过滤除文本节点之外的所有内容：

function textNodesUnder(el){
  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
  while(n=walk.nextNode()) a.push(n);
  return a;
}
我不得不调整这个以排除<script>元素的内容：gist.github.com/Daniel-Hug/1415b4d027e3e9854456f4e812ea2ce1
2021-03-23 15:51:07
如果您使用的是 TreeWalker 方法并且想要排除 Web_Designer 提到的脚本或样式标签，则可以将过滤器作为第三个参数传递给 createTreeWalker
2021-03-28 15:51:07
@julmot 在我的电脑上，使用 Chrome v50 查找此页面上的所有文本节点，使用第一种技术需要 1900μs，但使用 TreeWalker 技术需要 220μs。因此，速度要快 8 或 9 倍。
2021-04-01 15:51:07
@VinayPai - 警告：filter仅在 上运行a node that has passed the whatToShow check，因此在这种情况下，您无法使用方便的NodeFilter.SHOW_TEXT，而是必须添加额外的逻辑来手动过滤文本节点nodeType或其他内容。
2021-04-02 15:51:07
@Web_Designer - 仍在使用的替代方案document.createTreeWalker()：gist.github.com/Sphinxxxx/ed372d176c5c2c1fd9ea1d8d6801989b
2021-04-07 15:51:07 
function deepText(node){
    var A= [];
    if(node){
        node= node.firstChild;
        while(node!= null){
            if(node.nodeType== 3) A[A.length]=node;
            else A= A.concat(deepText(node));
            node= node.nextSibling;
        }
    }
    return A;
}
如何while (node)没有!= null？
2021-03-18 15:51:07
一旦您知道第一个（父）节点是子节点，node.nextSibling 的唯一可能值是另一个子节点或 null。
2021-03-19 15:51:07
我担心递归解决方案可能会遇到堆栈限制问题，但我现在看到这不太可能。
2021-04-09 15:51:07
甚至 for (node=node.firstChild;node;node=node.nextSibling){ … }
2021-04-13 15:51:07
其它你可能感兴趣的问题
上一篇使用 jQuery 选择复选框组的值 下一篇在 Angular 2 中打印 Html 模板（Angular 2 中的 ng-print）