Seleccionar elemento por coincidencia exacta de su contenido

De acuerdo, me pregunto si hay una manera de hacer que :contains() el selector de jQuery seleccione elementos con solo la cadena que está escrita

por ejemplo –

 

hello

hello world

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

El selector seleccionará ambos elementos p y los convertirá en negrita, pero quiero que seleccione solo el primero.

No, no hay selector jQuery (o CSS) que haga eso.

Puedes usar el filter fácilmente:

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

No es un selector , pero cumple su función. 🙂

Si desea manejar espacios en blanco antes o después del “hola”, puede lanzar un $.trim allí:

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

Para los optimizadores prematuros, si no te importa que no coincida con

hello

y similares, puedes evitar las llamadas a $ y el text usando innerHTML directamente :

 return this.innerHTML === "hello"; 

… pero tendrías que tener muchos párrafos para que importara, tantos que probablemente tendrías otros problemas primero. 🙂

Intente agregar una extensión de pseudo función:

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

Entonces puedes hacer:

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

Puede usar la función de filtro de jQuery () para lograr esto.

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

Entonces, la respuesta de Amandu funciona principalmente. Sin embargo, al usarlo en la naturaleza, me encontré con algunos problemas, donde las cosas que esperaba encontrar no se encontraban. Esto fue porque a veces hay un espacio en blanco al azar que rodea el texto del elemento. Creo que si buscas “Hello World”, aún deseas que coincida con “Hello World”, o incluso “Hello World \ n”. Por lo tanto, acabo de agregar el método “trim ()” a la función, que elimina el espacio en blanco circundante, y comenzó a funcionar mejor.

Específicamente…

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

Además, tenga en cuenta que esta respuesta es muy similar a Seleccionar enlace por texto (coincidencia exacta)

Y nota secundaria … trim solo elimina el espacio en blanco antes y después del texto buscado. No elimina espacios en blanco en el medio de las palabras. Creo que este es un comportamiento deseable, pero podrías cambiar eso si quisieras.

Al igual que TJ Crowder declaró anteriormente, la función de filtro hace maravillas. No funcionó para mí en mi caso específico. Necesitaba buscar múltiples tablas y sus respectivas tags td dentro de un div (en este caso un diálogo 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. } }); 

¡Espero que esto sea útil para alguien!

Encontré una manera que me funciona. No es 100% exacto, pero elimina todas las cadenas que contienen más que solo la palabra que estoy buscando porque compruebo que la cadena no contenga espacios individuales también. Por cierto, no necesitas estos “”. jQuery sabe que estás buscando una cadena. Asegúrese de tener solo un espacio en la parte: contains (); de lo contrario, no funcionará.

 

hello

hello world

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

Y sí, sé que no funcionará si tienes cosas como

helloworld

El .first () ayudará aquí

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