faire du jQuery `:contient du (de la)", sélectionnez uniquement chaîne exacte

Question

Bon, je me demande si il existe un moyen de faire de l' :contains() jQuery sélecteur pour sélectionner des éléments avec seulement la chaîne qui est tapé dans

par exemple

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

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

Le sélecteur sélectionnez les deux, p - éléments et de les mettre en gras, mais je le veux pour sélectionner uniquement la première.

Merci d'avance

Answer 1

Non, il n'y a pas de jQuery (ou CSS) sélecteur de qui 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 souhaitez gérer les espaces avant ou après le "bonjour", vous pourriez jeter un $.trim là-bas:

return $.trim($(this).text()) === "hello";

Pour les prématurés optimiseurs de là-bas, si vous n'avez pas de soins qu'il ne correspond pas à <p><span>hello</span></p> et similaires, vous pouvez éviter les appels d' $ et text par l'aide d' innerHTML directement:

return this.innerHTML === "hello";

...mais vous devez avoir un beaucoup de paragraphes pour qu'il importe, tant que vous vous aurais probablement d'autres questions en premier. :-)

Answer 2

Essayez d'ajouter un étendre pseudo fonction:

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

Ensuite, vous pouvez faire:

$('p:textEquals("Hello World")');

Answer 3

Vous pouvez utiliser du jQuery filtre() fonction pour atteindre cet objectif.

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

Answer 4

Donc Amandu la réponse de la plupart des œuvres. L'aide à l'état sauvage, cependant, j'ai rencontré quelques problèmes, où les choses que j'aurais attendu d'être trouvé n'obtenaient pas trouvé. C'était parce que parfois il est aléatoire de l'espace blanc qui entoure le texte de l'élément. Il est ma conviction que si vous êtes à la recherche de "Hello World", vous voulez toujours de match " Hello World ", ou encore "Hello World \n". Donc, j'ai juste ajouté le "trim()" méthode de la fonction, ce qui supprime environnant les espaces et il a commencé à travailler mieux.

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

Aussi, remarque, cette réponse est très similaire à Sélectionnez le lien en texte (correspondance exacte)

Et secondaire remarque... trim seulement supprime les espaces avant et après le texte recherché. Il ne supprime pas les espaces dans le milieu des mots. Je crois que c'est comportement souhaitable, mais vous pouvez changer cela si vous voulez.

Answer 5

L' .premier (le) de l'aide ici

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