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

Phr*_*ogz 38 html javascript

可能重复:
getElementsByTagName()等效于textNodes

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

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;
      })
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

然而,鉴于XPath可以简单地查询.//text()并完成它,这似乎是不优雅的.

将所有文本节点放在HTML文档中的特定元素下的最简单方法是什么,适用于IE9 +,Safari5 +,Chrome19 +,Firefox12 +,Opera11 +?

"最简单"被宽松地定义为"有效且短暂,没有打高尔夫球".

Phr*_*ogz 123

根据@ 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;
}
Run Code Online (Sandbox Code Playgroud)

但是,使用速度更快,更紧凑,更优雅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;
}
Run Code Online (Sandbox Code Playgroud)

  • @julmot在我的计算机上,使用Chrome v50查找此页面上的所有文本节点,使用第一种技术需要1900μs,但使用TreeWalker技术需要220μs.所以,快8到9倍. (5认同)
  • 为了排除`<script>`元素的内容,我不得不进行以下操作:https://gist.github.com/Daniel-Hug/1415b4d027e3e9854456f4e812ea2ce1 (2认同)
  • @Web_Designer - 仍然使用`document.createTreeWalker()` 的替代方案:https://gist.github.com/Sphinxxxx/ed372d176c5c2c1fd9ea1d8d6801989b (2认同)

ken*_*bec 5

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;
}
Run Code Online (Sandbox Code Playgroud)

  • 甚至`for(node = node.firstChild; node; node = node.nextSibling){...}` (2认同)