Comment puis-je sélectionner des noeuds de texte avec jQuery?

Jauco a posté une bonne solution dans un commentaire, donc je le Copie ici:

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

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

jQuery.contents() peut être utilisé avec jQuery.filter pour trouver tous les noeuds de texte enfant. Avec un peu de twist, vous pouvez trouver des petits-enfants noeuds de texte aussi bien. Pas de récursivité requis:

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

je recevais beaucoup de noeuds de texte vides avec la fonction de filtre acceptée. Si vous êtes seulement intéressé à sélectionner des noeuds de texte qui contiennent des espaces non-blancs, essayez d'ajouter un nodeValue conditionnel à votre filter fonction, comme un simple $.trim(this.nodevalue) !== '' :

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

http://jsfiddle.net/ptp6m97v /

ou pour éviter des situations étranges où le contenu ressemble à de l'espace blanc, mais ne l'est pas (par exemple le soft tiret ­ caractère, nouvelles lignes \n , onglets, etc.), vous pouvez essayer d'utiliser une Expression Régulière. Par exemple, \S correspondra à tous les caractères autres que les espaces:

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

si vous pouvez faire l'hypothèse que tous les enfants sont des Noeuds D'élément ou des noeuds de texte, alors c'est une solution.

Pour avoir des enfants tous les nœuds de texte comme jquery collection:

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

pour obtenir une copie de l'élément original avec des enfants non textuels enlevés:

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

peut aussi être fait comme ceci:

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

le code ci-dessus filtre les textNodes à partir des noeuds enfants directs d'un élément donné.

pour une raison quelconque contents() n'a pas fonctionné pour moi, donc si cela n'a pas fonctionné pour vous, voici une solution que j'ai faite, j'ai créé jQuery.fn.descendants avec l'option d'inclure des noeuds de texte ou non

Utilisation

Obtenir tous les descendants, y compris les nœuds de texte et les nœuds d'élément

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

Obtenir tous les descendants en ne retournant que les nœuds de texte

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

Obtenir tous les descendants en ne retournant que les nœuds d'élément

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)

Drop En Version 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)}

version Javascript non diminuée: http://pastebin.com/cX3jMfuD

c'est cross browser, un petit polyfill Array.indexOf est inclus dans le code.

si vous voulez enlever toutes les étiquettes, puis essayer ce

fonction:

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

utilisation:

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

pour moi, le vieux .contents() semblait fonctionner pour retourner les noeuds de texte, il suffit d'être prudent avec vos sélecteurs de sorte que vous savez qu'ils seront des noeuds de texte.

par exemple, cela a enveloppé tout le contenu du TDS dans ma table avec des étiquettes pre et n'a eu aucun problème.

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

j'ai eu le même problème et résolu:

Code:

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

Utilisation:

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

est comme next() mais renvoie aussi les noeuds de texte.