Sélectionnez l'élément par correspondance exacte de son contenu

Très bien, je me demande s'il existe un moyen de faire en sorte que le :contains()sélecteur de jQuery sélectionne des éléments avec uniquement la chaîne qui est tapée

par exemple -

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

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

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

Non, il n'y a pas de sélecteur jQuery (ou CSS) qui fait cela.

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 y jeter un $.trim:

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

Pour les optimiseurs prématurés, si vous ne vous souciez pas que cela ne corresponde pas <p><span>hello</span></p>et similaire, vous pouvez éviter les appels vers $et texten utilisant innerHTMLdirectement:

return this.innerHTML === "hello";

... mais il vous faudrait beaucoup de paragraphes pour que cela compte, tellement que vous auriez probablement d'autres problèmes en premier. :-)

Essayez d'ajouter une pseudo fonction d'extension:

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

Ensuite, vous pouvez faire:

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

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

La réponse d'Amandu fonctionne donc principalement. En l'utilisant dans la nature, cependant, j'ai rencontré des problèmes, où les choses que j'aurais espéré trouver ne l'étaient pas. En effet, il y a parfois un espace blanc aléatoire autour du texte de l'élément. Je pense que si vous recherchez "Hello World", vous voudrez toujours qu'il 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électionner le lien par texte (correspondance exacte)

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

J'ai trouvé un moyen qui fonctionne pour moi. Ce n'est pas exact à 100% mais cela élimine toutes les chaînes qui contiennent plus que le mot que je recherche car je vérifie la chaîne ne contenant pas d'espaces individuels. Au fait, vous n'avez pas besoin de ces "". jQuery sait que vous recherchez une chaîne. Assurez-vous que vous n'avez qu'un seul espace dans la partie: contains () 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 tu as des trucs comme <p>helloworld</p>

Comme TJ Crowder l'a déclaré ci-dessus, la fonction de filtre fait des merveilles. Cela ne fonctionnait pas pour moi dans mon cas spécifique. J'avais besoin de 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 sera utile à quelqu'un!

Un one-liner qui fonctionne avec des bibliothèques alternatives à jQuery:

$('p').filter((i, p) => $(p).text().trim() === "hello").css('font-weight', 'bold');

Et c'est l'équivalent du a:contains("pattern")sélecteur d' un jQuery :

var res = $('a').filter((i, a) => $(a).text().match(/pattern/));

Le .first () aidera ici

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