[javascript] jQuery로 텍스트 노드를 어떻게 선택합니까?

요소의 모든 자손 텍스트 노드를 jQuery 컬렉션으로 가져 오려고합니다. 가장 좋은 방법은 무엇입니까?

답변

jQuery에는 편리한 기능이 없습니다. contents()하위 노드 만 제공하고 텍스트 노드를 포함하는 을 결합해야합니다 .와 함께 find()모든 하위 요소는 제공하지만 텍스트 노드는 제공하지 않습니다. 내가 생각해 낸 것은 다음과 같습니다.

var getTextNodesIn = function(el) {
    return $(el).find(":not(iframe)").addBack().contents().filter(function() {
        return this.nodeType == 3;
    });
};

getTextNodesIn(el);

참고 : jQuery 1.7 또는 이전 버전을 사용하는 경우 위 코드는 작동하지 않습니다. 이 문제를 해결하려면, 대신 addBack()에 andSelf(). 1.8 이상에서 andSelf()더 이상 사용되지 않습니다 addBack().

이것은 순수한 DOM 메소드에 비해 다소 비효율적 이며 jQuery의 contents()함수 오버로드에 대한 추악한 해결 방법 을 포함 해야 합니다 (지시 사항에 대한 의견에 @rabidsnail 덕분에) 간단한 재귀 함수를 사용하는 비 jQuery 솔루션입니다. 이 includeWhitespaceNodes매개 변수는 공백 텍스트 노드가 출력에 포함되는지 여부를 제어합니다 (jQuery에서는 자동으로 필터링됩니다).

업데이트 : includeWhitespaceNodes가 잘못된 경우의 버그를 수정했습니다.

function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

getTextNodesIn(el);

답변

Jauco는 의견에 좋은 해결책을 게시 했으므로 여기에 복사하고 있습니다.

$(elem)
  .contents()
  .filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  });

답변

$('body').find('*').contents().filter(function () { return this.nodeType === 3; });

답변

jQuery.contents()와 함께 사용하여 jQuery.filter모든 하위 텍스트 노드를 찾을 수 있습니다 . 약간의 왜곡으로 손자 텍스트 노드도 찾을 수 있습니다. 재귀가 필요하지 않습니다.

$(function() {
  var $textNodes = $("#test, #test *").contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  });
  /*
   * for testing
   */
  $textNodes.each(function() {
    console.log(this);
  });
});

div { margin-left: 1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="test">
  child text 1<br>
  child text 2
  <div>
    grandchild text 1
    <div>grand-grandchild text 1</div>
    grandchild text 2
  </div>
  child text 3<br>
  child text 4
</div>

스 니펫 확장

jsFiddle

답변

허용되는 필터 기능으로 많은 빈 텍스트 노드가 생겼습니다. 공백이 아닌 텍스트 노드 만 선택 nodeValue하려면 다음 filter과 같이 간단한 조건 처럼 함수에 조건을 추가 하십시오 $.trim(this.nodevalue) !== ''.

$('element')
    .contents()
    .filter(function(){
        return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
    });

http://jsfiddle.net/ptp6m97v/

또는 내용이 공백처럼 보이지만 (예 : 부드러운 하이픈 문자, 줄 바꿈 \n, 탭 등) 이상한 상황을 피하려면 정규식을 사용해보십시오. 예를 들어, \S공백이 아닌 문자와 일치합니다.

$('element')
        .contents()
        .filter(function(){
            return this.nodeType === 3 && /\S/.test(this.nodeValue);
        });

답변

모든 자식이 요소 노드 또는 텍스트 노드라고 가정 할 수 있다면 이것이 하나의 솔루션입니다.

모든 자식 텍스트 노드를 jquery 컬렉션으로 가져 오려면 :

$('selector').clone().children().remove().end().contents();

텍스트가 아닌 자식이 제거 된 원본 요소의 복사본을 얻으려면 :

$('selector').clone().children().remove().end();

답변

어떤 이유로 든 contents()나를 위해 작동하지 않았으므로 그것이 효과가 없다면 여기에 만든 해결책 jQuery.fn.descendants이 있습니다. 텍스트 노드를 포함하거나 포함하지 않는 옵션으로 생성 했습니다.

용법

텍스트 노드 및 요소 노드를 포함한 모든 자손 가져 오기

jQuery('body').descendants('all');

텍스트 노드 만 반환하는 모든 자손 가져 오기

jQuery('body').descendants(true);

요소 노드 만 반환하는 모든 자손을 가져옵니다.

jQuery('body').descendants();

커피 스크립트 원본 :

jQuery.fn.descendants = ( textNodes ) ->

    # if textNodes is 'all' then textNodes and elementNodes are allowed
    # if textNodes if true then only textNodes will be returned
    # if textNodes is not provided as an argument then only element nodes
    # will be returned

    allowedTypes = if textNodes is 'all' then [1,3] else if textNodes then [3] else [1]

    # nodes we find
    nodes = []


    dig = (node) ->

        # loop through children
        for child in node.childNodes

            # push child to collection if has allowed type
            nodes.push(child) if child.nodeType in allowedTypes

            # dig through child if has children
            dig child if child.childNodes.length


    # loop and dig through nodes in the current
    # jQuery object
    dig node for node in this


    # wrap with jQuery
    return jQuery(nodes)

자바 스크립트 버전에서 삭제

var __indexOf=[].indexOf||function(e){for(var t=0,n=this.length;t<n;t++){if(t in this&&this[t]===e)return t}return-1}; /* indexOf polyfill ends here*/ jQuery.fn.descendants=function(e){var t,n,r,i,s,o;t=e==="all"?[1,3]:e?[3]:[1];i=[];n=function(e){var r,s,o,u,a,f;u=e.childNodes;f=[];for(s=0,o=u.length;s<o;s++){r=u[s];if(a=r.nodeType,__indexOf.call(t,a)>=0){i.push(r)}if(r.childNodes.length){f.push(n(r))}else{f.push(void 0)}}return f};for(s=0,o=this.length;s<o;s++){r=this[s];n(r)}return jQuery(i)}

축소되지 않은 자바 스크립트 버전 : http://pastebin.com/cX3jMfuD

이것은 크로스 브라우저이며 작은 Array.indexOfpolyfill이 코드에 포함되어 있습니다.