Comment puis-je sélectionner efficacement des nœuds de texte dans un élément à l'aide de jQuery ou de Pure JavaScript ?

Sélection de nœuds de texte avec jQuery

La sélection de nœuds de texte dans un élément peut être une tâche difficile dans jQuery. Heureusement, il existe différentes approches disponibles pour y parvenir.

Approche 1 : combiner Contents() et Find()

jQuery ne fournit pas de fonction dédiée pour la sélection nœuds de texte. Cependant, une solution de contournement consiste à utiliser la méthode contents(), qui récupère les nœuds enfants, y compris les nœuds de texte, et à la combiner avec la méthode find(), qui sélectionne les éléments descendants mais exclut les nœuds de texte.

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

Remarque : Pour les versions de jQuery antérieures à 1.7, remplacez addBack() par andSelf(), et pour les versions 1.8 ou ultérieures, utilisez addBack().

Approche 2 : Solution DOM pure

Si vous préférez une solution plus efficace, une méthode non jQuery peut être utilisée. Cela implique une fonction récursive qui traverse l'arborescence DOM :

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

Exemple d'utilisation

Les deux approches vous permettent de récupérer tous les nœuds de texte dans un élément spécifié.

var textNodes = getTextNodesIn(el);

En personnalisant le paramètre includeWhitespaceNodes, vous pouvez choisir si les nœuds de texte d'espacement sont inclus ou non dans le résultat.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!