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

小编典典

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

html

我可以这样做：

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文档中，在特定元素下获取所有文本节点的最简单方法是什么？

“最简单”被粗略地定义为“高效而又短，没有打高尔夫球”。

阅读 430

2020-05-10

共1个答案

小编典典

根据@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;
}

2020-05-10