¿Hay un jQuery insensible a mayúsculas y minúsculas: contiene selector?


Respuestas:


125

Lo que terminé haciendo para jQuery 1.2 es:

jQuery.extend(
    jQuery.expr[':'], { 
        Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

Esto extenderá jquery para tener un: Contiene un selector que no distingue entre mayúsculas y minúsculas, el selector: contiene permanece sin cambios.

Editar: para jQuery 1.3 (gracias @ user95227) y más tarde necesita

jQuery.expr[':'].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

Editar: Aparentemente acceder al DOM directamente usando

(a.textContent || a.innerText || "") 

en vez de

jQuery(a).text()

En la expresión anterior se acelera considerablemente, así que intente bajo su propio riesgo si la velocidad es un problema. (ver la pregunta de @John )

Última edición: para jQuery 1.8 debería ser:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Solo quería que la gente supiera que la solución descrita por @Pat y otros para jQuery 1.3 también funciona para 1.4.3.
Jim Ade

Enlace a la pregunta / respuesta de @ John desde que se eliminó el enlace aquí: stackoverflow.com/questions/1407434/…
Mottie

Esto no funciona para jQuery 1.8. Vea la respuesta de seagullJS a continuación para obtener una versión actualizada - stackoverflow.com/a/12113443/560114
Matt Browne

105

Para hacerlo opcionalmente insensible a mayúsculas y minúsculas: http://bugs.jquery.com/ticket/278

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

luego use en :containsilugar de:contains


3
agregar una nueva función es mejor que sobrescribirme, ahora uso esta opción (funciona de
maravilla

22
esto debe agregarse a la biblioteca estándar de jquery
user482594

41

A partir de jQuery 1.3, este método está en desuso. Para que esto funcione, debe definirse como una función:

jQuery.expr[':'].Contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

38

Si alguien (como yo) le interesa lo que hacer una y m [3] en la media Contiene definición.


CLAVE / LEYENDA: Parámetros puestos a disposición por jQuery para usar en las definiciones del selector:

r = jQuery matriz de elementos que se analizan. (por ejemplo: r.length = Número de elementos)

i = índice del elemento actualmente bajo escrutinio, dentro de la matriz r .

a = elemento actualmente bajo escrutinio. La instrucción del selector debe devolver verdadero para incluirlo en sus resultados coincidentes.

m [2] = nodeName o * que estamos buscando (a la izquierda de los dos puntos).

m [3] = parámetro pasado al: selector (parámetro). Por lo general, un número de índice, como en : nth-of-type (5) , o una cadena, como en : color (azul) .


31

En jQuery 1.8 deberás usar

jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {                                                                                                                                                                
    return function (elem) {                                                            
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;        
    };                                                                                  
});

2
Funcionó perfectamente, gracias! Acabo de actualizar a 1.8 y esto dejó de funcionar.
Andreas

3
Gracias por la actualización. Recién actualizado a JQuery 1.8 y dejó de funcionar
Wasim

15

Una variación que parece funcionar un poco más rápido y que también permite expresiones regulares es:

jQuery.extend (
    jQuery.expr[':'].containsCI = function (a, i, m) {
        //-- faster than jQuery(a).text()
        var sText   = (a.textContent || a.innerText || "");     
        var zRegExp = new RegExp (m[3], 'i');
        return zRegExp.test (sText);
    }
);



Esto no solo distingue entre mayúsculas y minúsculas, sino que permite búsquedas potentes como:

  • $("p:containsCI('\\bup\\b')") (Coincide "Arriba" o "arriba", pero no "superior", "despertar", etc.)
  • $("p:containsCI('(?:Red|Blue) state')") (Coincide con "estado rojo" o "estado azul", pero no con "estado activo", etc.)
  • $("p:containsCI('^\\s*Stocks?')") (Coincide con "stock" o "stock", pero solo al comienzo del párrafo (ignorando cualquier espacio en blanco).)

11

Puede llegar tarde ... pero,

Prefiero ir por este camino ...

$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

De esta manera, NO altere los '.contains' NATIVOS de jQuery ... Es posible que necesite el predeterminado más tarde ... si lo manipula, es posible que vuelva a stackOverFlow ...


6
jQuery.expr[':'].contains = function(a,i,m){
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

El código de actualización funciona muy bien en 1.3, pero "contiene" debe estar en minúscula en la primera letra a diferencia del ejemplo anterior.


1
Creo que quería una función distinta para que ambos :containsy :Containsambos funcionen simultáneamente.
joshperry

"el selector: contiene permanece sin cambios".
Harry B

4

Consulte a continuación para usar ": contiene" para buscar texto que ignore su distinción entre mayúsculas y minúsculas de un código HTML,

 $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });
        $("#searchTextBox").keypress(function() {
          if($("#searchTextBox").val().length > 0){
            $(".rows").css("display","none");
            var userSerarchField = $("#searchTextBox").val();
            $(".rows:contains('"+ userSerarchField +"')").css("display","block");
          } else {
            $(".rows").css("display","block");
          }              
        });

También puede usar este enlace para encontrar el código de ignorar mayúsculas y minúsculas basado en su versión de jquery, Make jQuery: contiene mayúsculas y minúsculas


2

Una versión más rápida que usa expresiones regulares.

$.expr[':'].icontains = function(el, i, m) { // checks for substring (case insensitive)
    var search = m[3];
    if (!search) return false;

    var pattern = new RegExp(search, 'i');
    return pattern.test($(el).text());
};

¡Excelente trabajo! Muchas gracias. Creo que esta es la mejor y más actualizada respuesta a esta pregunta.
mavrosxristoforos

0

Tuve un problema similar con el siguiente no funciona ...

// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');

Esto funciona y sin la necesidad de una extensión

$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');

Esto también funciona, pero probablemente cae en la categoría de "bucle manual" ...

$('div.story span.Quality').contents().filter(function()
{
  return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');

0

Nueva una variable, le doy el nombre de subString y pongo la cadena que desea buscar en algunos elementos de texto. Luego, usando los elementos de selección del selector Jquery que necesita, como mi ejemplo, $("elementsYouNeed")y filtre por .filter(). En el .filter()comparará cada elemento en$("elementsYouNeed") con la función.

En la función que uso .toLowerCase()para el texto del elemento también subString que puede evitar la condición sensible a mayúsculas y minúsculas y verificar si hay una subString en ella. Después de eso, el .filter()método construye un nuevo objeto jQuery a partir de un subconjunto de los elementos coincidentes.

Ahora puede obtener los elementos de coincidencia en matchObjects y hacer lo que quiera.

var subString ="string you want to match".toLowerCase();

var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.