Seleccionar elemento por coincidencia exacta de su contenido
Muy bien, me pregunto si hay alguna manera de hacer que el :contains()selector de jQuery seleccione elementos solo con la cadena que se escribe.
Por ejemplo -
<p>hello</p>
<p>hello world</p>
$('p:contains("hello")').css('font-weight', 'bold');
El selector seleccionará ambos pelementos y los pondrá en negrita, pero quiero que seleccione solo el primero.
No, no existe ningún selector jQuery (o CSS) que haga eso.
Puedes usar fácilmente filter:
$("p").filter(function() {
return $(this).text() === "hello";
}).css("font-weight", "bold");
No es un selector , pero hace el trabajo. :-)
Si desea manejar espacios en blanco antes o después del "hola", puede incluir un $.trim:
return $.trim($(this).text()) === "hello";
Para los optimizadores prematuros que existen, si no les importa que no coincidan <p><span>hello</span></p>y sean similares, pueden evitar las llamadas a $y textusando innerHTMLdirectamente:
return this.innerHTML === "hello";
...pero tendrías que tener muchos párrafos para que importe, tantos que probablemente tendrías otros problemas primero. :-)
Intente agregar una pseudofunción de extensión:
$.expr[':'].textEquals = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().match("^" + arg + "$");
};
});
Entonces puedes hacer:
$('p:textEquals("Hello World")');
Puede utilizar la función filter() 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 en su mayor parte. Sin embargo, al usarlo en la naturaleza, me encontré con algunos problemas, donde no se encontraron cosas que esperaba encontrar. Esto se debía a que a veces hay espacios en blanco aleatorios rodeando el texto del elemento. Creo que si buscas "Hola mundo", aún querrás que coincida con "Hola mundo", o incluso "Hola mundo \n". Por lo tanto, acabo de agregar el método "trim()" a la función, que elimina los espacios en blanco circundantes, 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 extremadamente similar a Seleccionar enlace por texto (coincidencia exacta)
Y nota secundaria... trimsólo elimina los espacios en blanco antes y después del texto buscado. No elimina los espacios en blanco en medio de las palabras. Creo que este es un comportamiento deseable, pero podrías cambiarlo si quisieras.
