web-dev-qa-db-fra.com

Sélectionner un élément en fonction de son contenu

Très bien, je me demande s’il est possible de faire en sorte que le sélecteur :contains() de jQuery sélectionne les éléments avec niquement la chaîne de caractères saisie

par exemple -

<p>hello</p>
<p>hello world</p>

$('p:contains("hello")').css('font-weight', 'bold');

Le sélecteur sélectionnera les deux éléments p et les mettra en gras, mais je souhaite qu’il ne sélectionne que le premier.

jqueryjquery-selectors
145
julian

Non, aucun sélecteur jQuery (ou CSS) ne le fait.

Vous pouvez facilement utiliser filter :

_$("p").filter(function() {
    return $(this).text() === "hello";
}).css("font-weight", "bold");
_

Ce n'est pas un sélecteur , mais il fait le travail. :-)

Si vous voulez gérer les espaces avant ou après le "bonjour", vous pouvez lancer un $.trim dans cet emplacement:

_return $.trim($(this).text()) === "hello";
_

Pour les optimiseurs prématurés, si vous ne vous souciez pas du fait que cela ne correspond pas à _<p><span>hello</span></p>_ et similaire, vous pouvez éviter les appels à _$_ et text en utilisant directement innerHTML:

_return this.innerHTML === "hello";
_

... mais il vous faudrait un lot de paragraphes pour qu'il soit important, donc beaucoup que vous auriez probablement d’autres problèmes en premier. :-)

189
T.J. Crowder

Essayez d'ajouter une pseudo fonction extend:

$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().match("^" + arg + "$");
    };
});

Ensuite, vous pouvez faire:

$('p:textEquals("Hello World")');
52
Amadu Bah

La réponse d'Amandu fonctionne donc généralement. En l'utilisant dans la nature, cependant, j'ai rencontré quelques problèmes, des choses que je m'attendais à trouver ne sont pas retrouvées. En effet, des espaces blancs aléatoires entourent parfois le texte de l'élément. Je suis convaincu que si vous recherchez "Hello World", vous voudrez toujours que cela corresponde à "Hello World" ou même à "Hello World\n". Ainsi, je viens d’ajouter la méthode "trim ()" à la fonction, qui supprime les espaces blancs environnants, et cela a commencé à mieux fonctionner.

Plus précisément...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

Notez également que cette réponse est extrêmement similaire à Sélectionnez le lien par le texte (correspondance exacte)

Et note secondaire ... trim supprime uniquement les espaces avant et après le texte recherché. Il ne supprime pas les espaces au milieu des mots. Je crois que c'est un comportement souhaitable, mais vous pouvez le changer si vous le souhaitez.

9
bwest87

Vous pouvez utiliser la fonction filter () de jQuery pour y parvenir.

$("p").filter(function() {
// Matches exact string   
return $(this).text() === "Hello World";
}).css("font-weight", "bold");
8
lifetimes

J'ai trouvé un moyen qui fonctionne pour moi. Ce n'est pas exact à 100%, mais il élimine toutes les chaînes qui contiennent plus que le mot que je cherche, car je vérifie que la chaîne ne contient pas d'espaces individuels également. Au fait, vous n’avez pas besoin de ces "". jQuery sait que vous recherchez une chaîne. Assurez-vous de n’avoir qu’un seul espace dans la partie: includes (), sinon cela ne fonctionnera pas.

<p>hello</p>
<p>hello world</p>
$('p:contains(hello):not(:contains( ))').css('font-weight', 'bold');

Et oui je sais que ça ne marchera pas si vous avez des choses comme <p>helloworld</p>

4
rf1234

Comme T.J. Crowder indiqué ci-dessus, la fonction de filtre fait des merveilles. Cela ne fonctionnait pas pour moi dans mon cas particulier. Je devais rechercher plusieurs tables et leurs balises td respectives dans un div (dans ce cas, une boîte de dialogue jQuery).

$("#MyJqueryDialog table tr td").filter(function () {
    // The following implies that there is some text inside the td tag.
    if ($.trim($(this).text()) == "Hello World!") {
       // Perform specific task.
    }
});

J'espère que cela est utile à quelqu'un!

3
Greg A