¿Cómo hago que jQuery Contiene no distinga entre mayúsculas y minúsculas, incluido jQuery 1.8+?

91

Estoy tratando de utilizar "contiene" sin distinción entre mayúsculas y minúsculas. Intenté usar la solución en la siguiente pregunta de stackoverflow, pero no funcionó:

¿Hay un jQuery: contiene selector que no distingue entre mayúsculas y minúsculas?

Por conveniencia, la solución se copia aquí:

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

Aquí está el error:

Error: q is not a function
Source File: /js/jquery-1.4.js?ver=1.4
Line: 81

Aquí es donde lo estoy usando:

  $('input.preset').keyup(function() {
    $(this).next().find("li").removeClass("bold");
    var theMatch = $(this).val();
    if (theMatch.length > 1){
      theMatch = "li:Contains('" + theMatch + "')";
      $(this).next().find(theMatch).addClass("bold");
    }
  });

Mi uso del original "contiene" que distingue entre mayúsculas y minúsculas en el mismo escenario funciona sin errores. ¿Alguien tiene alguna idea? Lo apreciaría.

jquery contains case-sensitive case-insensitive Matrym
fuente
En caso de que a alguien le interesa, he actualizado mi blog en tres adicionales contiene selectores :containsExact, :containsExactCasey :containsRegexselectores de ahora el trabajo en todas las versiones de jQuery.
Mottie
Ver css-tricks.com/snippets/jquery/… ,
Alan Dong
Creo que .filter () es otra buena forma. Referencia
劉鎮 瑲

Respuestas:

127

Esto es lo que estoy usando en un proyecto actual, no he tenido ningún problema. Vea si tiene mejor suerte con este formato:

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

En jQuery 1.8, la API para esto cambió, la versión jQuery 1.8+ de esto sería:

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

Puedes probarlo aquí . Para obtener más detalles sobre los selectores personalizados 1.8+, consulte la wiki de Sizzle aquí .

Nick Craver
fuente
Eres un salvavidas. Gracias.
Matrym
3
¿Alguna posibilidad de que puedas hablar sobre lo que está haciendo exactamente?
Abe Miessler
4
@ClovisSix: gracias por el aviso, proporcioné un método 1.8+ para hacer lo mismo, avíseme si tiene algún problema.
Nick Craver
1
Para tener en cuenta que esto no reemplaza: contiene solo agregue otro selector: contiene.
Albanx
3
se debe llamar al selector icontains, o algo similar.
Sebastian
43

Vale la pena señalar que la respuesta es correcta, pero solo cubre :Contains, y no el alias :containsque podría conducir a un comportamiento inesperado (o podría usarse por diseño para aplicaciones avanzadas que requieren una búsqueda sensible e insensible).

Esto podría resolverse duplicando la extensión del alias: 

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

Me tomó un tiempo averiguar por qué no funcionaba para mí.

Elipsis
fuente
Habría comentado esto arriba, pero aparentemente no puedo.
Elipsis
5
No estoy seguro de a qué te refieres aquí. Esto anula el comportamiento documentado esperado de :contains. Creo que es más claro dejar el original:contains solo y llamar a su nuevo selector :icontains.
Justin Force
5
Eso está fuera del punto de mi publicación. La creación de un selector alternativo es ciertamente una opción válida, sin embargo, estaba señalando que extender: contiene, pero descuidar extender: contiene podría llevar a la confusión del usuario, cuando producen resultados diferentes.
Elipsis
1
Entonces gracias por compartir este "gotcha". :) Aún así, creo que es una buena idea mencionar que es mejor no anular el comportamiento incorporado cuando es menos trabajo construir un comportamiento paralelo no destructivo.
Justin Force
Probé algunas soluciones diferentes publicadas para esto y esta finalmente funcionó. Gracias.
taylor michels
27

Yo haría algo como esto 

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

Y dejar :containssolo ...

MANIFESTACIÓN

Entonces, ¿por qué jQuery no lo admite en su biblioteca? si es asi de facil ...

porque ¿su código pasa el código de Turquía?

Mina Gabriel
fuente
6

Puede llegar tarde ... pero,

Preferiría 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 manipula el NATIVO '.contains' de jQuery ... Es posible que necesite el predeterminado más adelante ... si se manipula, es posible que vuelva a stackOverFlow ...

ErickMejor
fuente
0

me permitiré agregar a mis amigos:

$.expr[":"].containsNoCase = function (el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    return eval("/" + search + "/i").test($(el).text()); 
};
bresleveloper
fuente
0

Solo pude ignorar la sensibilidad de mayúsculas y minúsculas de jQuery por completo para lograr lo que quiero usando el siguiente código:

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

Puede usar este enlace para buscar código basado en sus versiones de jQuery para ignorar la distinción entre mayúsculas y minúsculas, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Además, si desea utilizar: contiene y realizar una búsqueda, es posible que desee echar un vistazo a esto: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- en consecuencia

Umesh Patil
fuente