jQuery에서 임의의 텍스트 노드 선택을 구현하는 방법

Question

최근 여러 번 jQuery 선택기에 텍스트 노드 선택을 통합해야한다는 것을 깨달았습니다.

jQuery는 기본적으로 textnodes를 지원하지 않습니다. 이 유형의 질문에 대한 대부분의 대답은 .contents()을 사용하는 것이 좋습니다. 그러나 실제로는 "선택자"가 아니라 "통과"입니다. 따라서 직접적인 자식 만 제공하고 텍스트 노드뿐 아니라 모든 자식을 제공합니다.

는 내가 임의로 마크 업 텍스트 내의 모든 텍스트 노드를 선택해야 찾을 수 있기 때문에 텍스트 노드의 일부는 내가 손자, 증손자 등이 될 것입니다에 관심이있을 수 있습니다 :

<div id="formattedText"> 
    This is a <b>sample</b> block <a href="http://somewhere.com">of <em>text</em></a> 
    that I might want to get a list of <span class="groovy">all</span> text nodes in. 
</div> 

을

var txtNodes = $('#formattedText §'); 

구문의 새로운 비트에 대한 § 스탠드 내가 jQuery를 추가 할 : 그래서 대부분의 표현 방법은 오히려 이런 일에 jQuery를 선택을 확장하는 것입니다 .children()에 재귀 호출을 구현하는 것보다 이것을 달성하기 위해텍스트 노드를 나타냅니다.

var txtNodes = $('#formattedText:textNodes()'); 

어떻게 하나가 jQuery의 셀렉터 엔진이 방법을 확장 가겠어요 : 나는 :odd() 확장과 같은 몇 가지되지 않는 ASCII 기호 또는 뭔가를 찾아야한다? 나는 기존의 DOM을 걷는 방법에 익숙해 져서 새로운 것을 만드는 것에 의지 할 필요가 없다고 생각할 것입니다.

.contents()을 사용하는 표현적인 트릭이 있는데, jQuery를 확장하지 않고도 원하는 것을 수행한다고 생각하지 않습니까?

---

^{내 사용 사례 : 저는 userscript에서 제 3 자 웹 사이트 (그리스 몽키 등)에서 텍스트의 정의 "강조"를하고 싶어. "사용자 정의"는 다른 패턴이 달라질 것임을 의미합니다. background-color 등등. 따라서 모든 텍스트 노드가 깊이가 있어야하며 태그가 필요 없으며 하나의 큰 청크로 모든 텍스트를 원하지 않습니다. .text() 나를 줄 것입니다.}

Answer 1

나는 : -pseudo 선택기 확장을하는 데 필요한 새 서명 되 돌렸다, 그러나 여기 방법입니다하지 않은 : 나는 발견 textnodes 반복 것, 여기에 demo에

(function($){ 

    function walk(node, ret) { 
     var ret = ret || [], 
      cur, 
      nodes = node.childNodes; 

     for(var i = 0, l = nodes.length; i < l; ++i) { 
      cur = nodes[i]; 

      if(cur.nodeType === 1) { 
       walk(cur, ret); 
      } 
      else if(cur.nodeType === 3) { 
       ret.push(cur); 
      } 
     } 

     return ret; 
    } 

    $.fn.findText = function() { 

     var ret = this.map(function() { 
      return walk(this); 
     }); 

     return this.pushStack(ret, "textNodes", ""); 
    }; 

})(jQuery); 

주문에 따라 페이지에서 주문을 볼 수 있습니다.