在HTML页面中找到所有的文本节点[复制]

时间:2022-10-31 13:03:14

Possible Duplicate:
getElementsByTagName() equivalent for textNodes

可能的重复:getElementsByTagName()等效于textnode

For this question I needed to find all text nodes under a particular node. I can do this like so:

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

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;
      })
    );
  }
}

However, this seems inelegant in light of the fact that with XPath one could simply query for .//text() and be done with it.

但是,考虑到使用XPath,可以简单地查询.//text()并使用它,这似乎不太合适。

What's the simplest way to get all text nodes under a particular element in an HTML document, that works on IE9+, Safari5+, Chrome19+, Firefox12+, Opera11+?

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

"Simplest" is defined loosely as "efficient and short, without golfing".

“最简单”被宽泛地定义为“高效而短,不打高尔夫球”。

2 个解决方案

#1


96  

Based on @kennebec's answer, a slightly tighter implementation of the same logic:

基于@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;
}

However, far faster, tighter, and more elegant is using createTreeWalker so that the browser filters out everything but the text nodes for you:

然而,使用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;
}

#2


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;
}

#1


96  

Based on @kennebec's answer, a slightly tighter implementation of the same logic:

基于@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;
}

However, far faster, tighter, and more elegant is using createTreeWalker so that the browser filters out everything but the text nodes for you:

然而,使用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;
}

#2


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;
}