Comment puis-je sélectionner les nœuds de texte avec jQuery?

Question

Je voudrais obtenir tous les descendants des nœuds de texte d'un élément, comme un jQuery collection. Quelle est la meilleure façon de le faire?

Answer 1

jQuery n'a pas une fonction pratique pour cela. Vous avez besoin de combiner contents(), ce qui donnera juste des nœuds enfants, mais inclut les nœuds de texte, avec find(), ce qui donne tous les éléments descendants, mais pas de nœuds de texte. Voici ce que j'ai trouvé:

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

getTextNodesIn(el);

Remarque: Si vous utilisez jQuery 1.7 ou plus tôt, le code ci-dessus ne fonctionnera pas. Pour résoudre ce problème, remplacez addBack() avec andSelf(). andSelf() est déconseillée en faveur de l' addBack() , passant de 1,8 à partir.

C'est quelque peu inefficace par rapport à la pure méthodes du DOM et doit inclure un laid solution de contournement pour jQuery est une surcharge de son contents() de la fonction (merci à @rabidsnail dans les commentaires pour le pointage), donc ici, c'est non-jQuery solution à l'aide d'une simple fonction récursive. L' includeWhitespaceNodes paramètre contrôle si oui ou non les espaces les nœuds de texte sont inclus dans la sortie (en jQuery ils sont filtrés automatiquement).

Mise à jour: correction d'un bug lors de includeWhitespaceNodes est falsy.

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

Answer 2

Jauco posté une bonne solution dans un commentaire, je suis donc la copie ici:

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

Answer 3

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

Answer 4

Ce que j'ai trouvé est:

var myText = $('div').contents(':not(span)').text();

Cette approche n'est pas flexible, mais parfois utile.

démo jsFiddle

Answer 5

Si vous pouvez faire l'hypothèse que tous les enfants sont soit des Nœuds d'Élément ou les Nœuds de Texte, alors c'est une solution.

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

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

Pour obtenir une copie de l'original de l'élément non textuel enfants enlevés:

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