2012-05-24 3 views
28

가능한 중복 모든 텍스트 노드를 찾기 : 내가 특정 노드 아래에있는 모든 텍스트 노드를 발견 할 필요가 this question를 들어
getElementsByTagName() equivalent for textNodesHTML 페이지에

. 나는 과 같이이 작업을 수행 할 수 있습니다

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 문서의 특정 요소 아래에 모든 텍스트 노드를 가져 오는 가장 간단한 방법은 무엇입니까?

"가장 단순한"은 느슨하게 "골프를 쓰지 않고 효율적이고 짧음"으로 정의됩니다. @의 케네 벡의 대답은, 같은 논리의 약간 엄격한 구현을 바탕으로

+1

http : // st ackoverflow.com/questions/2579666/getelementsbytagname-equivalent-for-textnodes –

+0

아우, bugger. 고마워, 잭, 나는 검색했지만 그 질문을 찾지 못했습니다. – Phrogz

+0

그래, 나도 왜 사이드 바에 나타나지 않았는지 모르지만, Google 검색을하는 동안 그것을 발견 : –

답변

89

:

그러나
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; 
} 
+3

@julmot 내 컴퓨터에서 Chrome v50을 사용하여이 페이지의 모든 텍스트 노드를 찾으려면 첫 번째 기술을 사용하여 1900μs가 걸리지 만 TreeWalker 기술을 사용하면 220μs가 걸립니다. 따라서 8 ~ 9 배 빠릅니다. – Phrogz

+1

'

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

'동안 (노드)'에 대해'! = null'? – Phrogz

+2

또는 심지어'for (node ​​= node.firstChild; node; node = node.nextSibling) {...}' – Phrogz

+1

재귀 적 솔루션이 스택 제한 문제에 부딪 힐 수도 있다는 걱정이 들었지 만 [지금 이럴 것 같지 않습니다.] http://stackoverflow.com/questions/7826992/browser-javascript-stack-size-limit). – Phrogz