web-dev-qa-db-fra.com

Rechercher une chaîne de texte à l'aide de jQuery?

Supposons qu'une page Web comporte une chaîne telle que "Je suis une chaîne simple" que je souhaite trouver. Comment pourrais-je m'y prendre avec JQuery?

jquerytext
238
Keith Donegan

jQuery a la méthode contient. Voici un extrait pour vous:

<script type="text/javascript">
$(function() {
    var foundin = $('*:contains("I am a simple string")');
});
</script>

Le sélecteur ci-dessus sélectionne tout élément contenant la chaîne cible. Le foundin sera un objet jQuery qui contient n'importe quel élément correspondant. Voir les informations sur l'API à l'adresse suivante: http://docs.jquery.com/Selectors/contains#text

Une chose à noter avec le caractère générique '*' est que vous obtiendrez tous les éléments, y compris les éléments html et body, que vous ne voudrez probablement pas. C'est pourquoi la plupart des exemples de jQuery et d'autres endroits utilisent $ ('div: contient ("Je suis une simple chaîne")')

324
Tony Miller

Normalement, les sélecteurs jQuery ne recherchent pas dans les "nœuds de texte" du DOM. Toutefois, si vous utilisez la fonction .contents (), les nœuds de texte seront inclus. Vous pouvez ensuite utiliser la propriété nodeType pour filtrer uniquement les nœuds de texte et la propriété nodeValue pour effectuer une recherche dans la chaîne de texte.

 $ ('*', 'body') 
 .etSelf () 
 .contents () 
 .filter (function () {
 return this.nodeType === 3; 
}) 
 .filter (function () {
 // Ne correspond que lorsque contient une "chaîne simple" n'importe où dans le texte 
 renvoie this.nodeValue.indexOf ('chaîne simple')! = -1; 
}) 
 .each (function () {
 // Faites quelque chose avec cela. nodeValue 
});
50
BarelyFitz

Cela ne sélectionnera que les éléments feuille qui contiennent "Je suis une simple chaîne".

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).css("border","solid 2px red") });

Collez le texte suivant dans la barre d’adresse pour le tester.

javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;

Si vous voulez juste attraper "Je suis une simple chaîne". Commencez par envelopper le texte dans un élément comme celui-ci.

$('*:contains("I am a simple string")').each(function(){
     if($(this).children().length < 1) 
          $(this).html( 
               $(this).text().replace(
                    /"I am a simple string"/
                    ,'<span containsStringImLookingFor="true">"I am a simple string"</span>' 
               )  
           ) 
});

et ensuite faire ceci.

$('*[containsStringImLookingFor]').css("border","solid 2px red");
28
Slim

Si vous voulez juste le noeud le plus proche du texte que vous cherchez, vous pouvez utiliser ceci:

$('*:contains("my text"):last');

Cela fonctionnera même si votre code HTML ressemble à ceci:

<p> blah blah <strong>my <em>text</em></strong></p>

En utilisant le sélecteur ci-dessus, vous trouverez la balise <strong>, puisqu'il s'agit de la dernière balise contenant cette chaîne.

17
nickf

Jetez un oeil à mettre en évidence (plugin jQuery).

12
Chris Doggett

En ajoutant simplement à la réponse de Tony Miller, cela m'a permis d'atteindre 90% des objectifs que je cherchais mais qui ne fonctionnaient toujours pas. L'ajout de .length > 0; à la fin de son code a permis à mon script de fonctionner.

 $(function() {
    var foundin = $('*:contains("I am a simple string")').length > 0;
 });
7
Pixelomo

cette fonction devrait fonctionner. fait essentiellement une recherche récursive jusqu'à ce que nous obtenions une liste distincte de noeuds feuille.

function distinctNodes(search, element) {
    var d, e, ef;
    e = [];
    ef = [];

    if (element) {
        d = $(":contains(\""+ search + "\"):not(script)", element);
    }
    else {
            d = $(":contains(\""+ search + "\"):not(script)");
    }

    if (d.length == 1) {
            e.Push(d[0]);
    }
    else {
        d.each(function () {
            var i, r = distinctNodes(search, this);
            if (r.length === 0) {
                e.Push(this);
            }
            else {
                for (i = 0; i < r.length; ++i) {
                    e.Push(r[i]);
                }
            }
        });
    }
    $.each(e, function () {
        for (var i = 0; i < ef.length; ++i) {
            if (this === ef[i]) return;
        }
        ef.Push(this);
    });
    return ef;
}
2
danatcofo