Seleccionar elemento por su texto con jQuery

Seleccionar elementos basados en su contenido textual es una tarea común cuando no tenemos acceso directo a IDs o clases específicas. En este tutorial, exploraremos el uso del selector :contains() y cómo manejar casos más avanzados.

1. El selector `:contains()`

El método más directo en jQuery es el selector :contains('texto'). Este busca cualquier elemento que contenga la cadena de texto especificada, incluso si es parte de una frase más larga.

Nota importante: Este selector distingue entre mayúsculas y minúsculas (case-sensitive).

Ejemplo 1: Selección de etiquetas (`<label>`)

Imagina que tienes una lista de etiquetas y quieres destacar una específicamente por su nombre.

HTML

<div class="contenedor">
    <label>Factura pendiente</label>
    <label>Factura pagada</label>
    <label>Procesando envío</label>
</div>

<script>
    $(document).ready(function() {
        // Seleccionamos la etiqueta que contiene "pagada"
        let etiqueta = $("label:contains('Factura pagada')");
        
        // Aplicamos un estilo visual
        etiqueta.css({
            "color": "#27ae60",
            "font-weight": "bold"
        });
    });
</script>

2. Selección de párrafos y elementos de bloque

El funcionamiento es idéntico para párrafos u otros elementos de bloque. Es ideal para buscar palabras clave dentro de un cuerpo de texto.

Ejemplo 2: Resaltar un párrafo específico

HTML

<div class="noticias">
    <p>El clima estará soleado hoy.</p>
    <p>Actualización del mercado financiero.</p>
    <p>Nueva tecnología descubierta.</p>
</div>

<script>
    // Buscamos el párrafo que menciona "mercado"
    $('p:contains("mercado")').css("background-color", "yellow");
</script>

3. ¡Cuidado! Coincidencias parciales vs. exactas

El selector :contains() tiene un comportamiento de «coincidencia parcial». Si buscas :contains('Texto 1'), también seleccionará un elemento que diga "Texto 10".

Si necesitas una coincidencia exacta, es mejor usar .filter():

JavaScript

// Solo seleccionará el elemento si el texto es EXACTAMENTE "Texto 1"
let exacto = $("p").filter(function() {
    return $(this).text() === "Texto 1";
});

exacto.css("border", "1px solid blue");

Resumen de buenas prácticas

Case sensitivity: Recuerda que :contains('hola') no encontrará un elemento que diga "Hola".
Rendimiento: Si tienes miles de elementos, filtrar por texto puede ser más lento que usar clases. Úsalo con moderación.
Comillas: Puedes usar comillas simples o dobles dentro del selector, pero asegúrate de alternarlas correctamente: $('p:contains("Texto")').

4. Búsqueda insensible a mayúsculas (Case-insensitive)

Por defecto, jQuery no ofrece un selector nativo que ignore si el texto está en mayúsculas o minúsculas. Sin embargo, podemos crear nuestro propio pseudo-selector personalizado de forma muy sencilla.

Añade este bloque de código antes de tus scripts de búsqueda:

JavaScript

// Definimos un nuevo selector llamado :containsCI (Case Insensitive)
$.expr[":"].containsCI = $.expr.createPseudo(function(arg) {
    return function(elem) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Cómo usarlo:

Ahora puedes buscar texto sin preocuparte por cómo esté escrito:

JavaScript

// Esto encontrará "TEXTO", "texto" o "Texto"
$("p:containsCI('texto')").css("color", "green");

5. Resumen Comparativo

Método	Tipo de coincidencia	Sensible a Mayúsculas	Uso recomendado
`:contains()`	Parcial	Sí	Búsquedas rápidas y sencillas.
`.filter()`	Exacta	Sí	Cuando necesitas precisión total (ej. IDs de productos).
`:containsCI` (Personalizado)	Parcial	No	Buscadores de usuario o filtros de tablas.

Conclusión

Seleccionar por texto en jQuery es una herramienta potente pero que requiere conocer sus matices. Mientras que :contains() es ideal para prototipos rápidos, el uso de .filter() y selectores personalizados te dará el control total sobre la manipulación del DOM basada en contenido.

Más tutoriales de jQuery

Seleccionar elemento por su texto con jQuery