jQuery: buscar elemento por texto

Respuestas:

432

Puede usar el :containsselector para obtener elementos en función de su contenido.

Demo aquí

$('div:contains("test")').css('background-color', 'red');
<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Cohete Hazmat
fuente
2
Genial, pero es sensible a mayúsculas y minúsculas. ¿Hay alguna forma de hacer una búsqueda que no distinga entre mayúsculas y minúsculas?
Dipu Raj
123
@DipuRaj: Tendría que usar .filteren su lugar. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Rocket Hazmat
55
Sí, utilice el appraoch que utiliza @RocketHazmat , digamos que tiene 5 elementos con el prefijo 'Registrar contrato' y cada uno tiene un sufijo numérico. Terminará seleccionándolos a todos , cuando en realidad solo desea el elemento con texto: 'Registrar contrato 26' .
Feng Huo
1
Aunque: contiene distingue entre mayúsculas y minúsculas, funcionó para mí porque pasé la cadena de texto exacta para encontrar.
Francisco Quintero
1
En caso de que ayude a alguien a quien le gusta usar espacios en sus padres, lo siguiente no funciona:$('div:contains( "test" )').css('background-color', 'red');
M Katz
92

En la documentación de jQuery dice:

El texto coincidente puede aparecer directamente dentro del elemento seleccionado, en cualquiera de los descendientes de ese elemento, o en una combinación

Por lo tanto, no basta con usar el :contains() selector , también debe verificar si el texto que busca es el contenido directo del elemento al que se dirige, algo así:

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}
yoav barnea
fuente
3
Acabo de encontrarme con este problema exacto. Esto debería ser más alto.
DickieBoy
2
Esta solución puede fallar en el siguiente escenario: <li>Hello <a href='#'>World</a>, How Are You. . Aquí, si Howse está buscando, la condición fallará, creo.
me_digvijay
23

Amigos, sé que esto es viejo, pero bueno, tengo esta solución que creo que funciona mejor que todos. En primer lugar, supera la sensibilidad de mayúsculas y minúsculas que jquery: contiene () se envía con:

var text = "text";

var search = $( "ul li label" ).filter( function ()
{
    return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()

Espero que alguien en el futuro cercano lo encuentre útil.

Morgs
fuente
18

La respuesta de Rocket no funciona.

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

Simplemente modifiqué su DEMO aquí y puedes ver que el DOM raíz está seleccionado.

$('div:contains("test"):last').css('background-color', 'red');

agregue el selector " : last " en el código para arreglar esto.

Terry Lin
fuente
Esto funciona mejor cuando el selector devuelve múltiples resultados y necesita reducirlo a un elemento específico donde no tiene un atributo "Id" para hacer referencia.
Tahir Khalid
14

La mejor manera en mi opinión.

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};
rplaurindo
fuente
8

Sí, use el containsselector jQuery .

Alex Turpin
fuente
10
er, no no: 'contiene:' no hace una coincidencia exacta, solo si la aguja está contenida (de ahí el nombre) en el pajar ... como han dicho otros aquí
Mike rodent
3
Esta no es una respuesta.
lharby
4

El siguiente jQuery selecciona los nodos div que contienen texto pero no tienen hijos, que son los nodos hoja del árbol DOM.

$('div:contains("test"):not(:has(*))').css('background-color', 'red');
<div>div1
<div>This is a test, nested in div1</div>
<div>Nested in div1<div>
</div>
<div>div2 test
<div>This is another test, nested in div2</div>
<div>Nested in div2</div>
</div>
<div>
div3
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Nicholas Sushkin
fuente
¡Esta es la mejor respuesta!
Calciol