Jak wybrać węzły tekstowe za pomocą jQuery?

Chciałbym uzyskać wszystkie potomne węzły tekstowe elementu, jako kolekcję jQuery. Jak najlepiej to zrobić?

jQuery nie ma do tego wygodnej funkcji. Musisz połączyć contents(), co da tylko węzły potomne, ale zawiera węzły tekstowe, z find(), co daje wszystkie elementy potomne, ale nie ma węzłów tekstowych. Oto, co wymyśliłem:

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

getTextNodesIn(el);

Uwaga: Jeśli używasz jQuery 1.7 lub wcześniejszego, powyższy kod nie będzie działał. Aby rozwiązać ten problem, należy wymienić addBack()z andSelf(). andSelf()jest przestarzałe na korzyść addBack()od 1.8.

Jest to nieco nieefektywne w porównaniu z czystymi metodami DOM i musi zawierać brzydkie obejście dla przeciążenia contents()funkcji przez jQuery (dzięki @rabidsnail w komentarzach do zaznaczenia tego), więc tutaj jest rozwiązanie inne niż jQuery wykorzystujące prostą funkcję rekurencyjną. Do includeWhitespaceNodeskontroli parametrów czy odstępu węzły tekstowe są zawarte w wyjściowym (jQuery automatycznie są odfiltrowane).

Aktualizacja: Naprawiono błąd, gdy parametr includeWhitespaceNodes jest fałszywy.

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 opublikował dobre rozwiązanie w komentarzu, więc kopiuję go tutaj:

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

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

jQuery.contents()można użyć jQuery.filterdo znalezienia wszystkich potomnych węzłów tekstowych. Przy odrobinie skrętu można również znaleźć wersety tekstowe dla wnuków. Nie wymaga rekurencji:

$(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

Otrzymałem wiele pustych węzłów tekstowych z zaakceptowaną funkcją filtrowania. Jeśli chcesz tylko wybrać węzły tekstowe zawierające spacje, spróbuj dodać funkcję nodeValuewarunkową filter, na przykład $.trim(this.nodevalue) !== '':

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

http://jsfiddle.net/ptp6m97v/

Lub, aby uniknąć dziwnych sytuacji, w których treść wygląda jak biała spacja, ale nie jest (np. Miękki ­znak łącznika, znaki nowej linii \n, tabulatory itp.), Możesz spróbować użyć wyrażenia regularnego. Na przykład \Sdopasuje dowolne znaki spoza:

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

Jeśli możesz założyć, że wszystkie elementy potomne są Węzłami Elementu lub Węzłami Tekstowymi, to jest to jedno rozwiązanie.

Aby uzyskać wszystkie potomne węzły tekstowe jako kolekcję jquery:

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

Aby uzyskać kopię oryginalnego elementu z usuniętymi dziećmi nietekstowymi:

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

Z jakiegoś powodu contents()nie działało dla mnie, więc jeśli to nie zadziałało, oto rozwiązanie, które stworzyłemjQuery.fn.descendants z opcją włączenia węzłów tekstowych lub nie

Stosowanie

Zdobądź wszystkich potomków, w tym węzły tekstowe i węzły elementów

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

Zbierz wszystkich potomków zwracających tylko węzły tekstowe

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

Uzyskaj wszystkich potomków zwracających tylko węzły elementów

jQuery('body').descendants();

Coffeescript Original :

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)

Upuść wersję Javascript

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

Unminified Wersja Javascript: http://pastebin.com/cX3jMfuD

Jest to przeglądarka internetowa, w Array.indexOfkodzie znajduje się mała zawartość wypełniająca.

Można to również zrobić w następujący sposób:

var textContents = $(document.getElementById("ElementId").childNodes).filter(function(){
        return this.nodeType == 3;
});

Powyższy kod filtruje textNodes z bezpośrednich potomnych węzłów potomnych danego elementu.

jeśli chcesz usunąć wszystkie tagi, spróbuj tego

funkcjonować:

String.prototype.stripTags=function(){
var rtag=/<.*?[^>]>/g;
return this.replace(rtag,'');
}

stosowanie:

var newText=$('selector').html().stripTags();

Dla mnie zwyczajnie stary .contents() wydawał się działać, aby zwrócić węzły tekstowe, po prostu uważaj na selektory, abyś wiedział, że będą to węzły tekstowe.

Na przykład zawinął całą zawartość TD w mojej tabeli pretagami i nie miał problemów.

jQuery("#resultTable td").content().wrap("<pre/>")

Miałem ten sam problem i rozwiązałem go za pomocą:

Kod:

$.fn.nextNode = function(){
  var contents = $(this).parent().contents();
  return contents.get(contents.index(this)+1);
}

Stosowanie:

$('#my_id').nextNode();

Jest jak, next()ale zwraca również węzły tekstowe.