Como faço para que o jQuery Contains não faça distinção entre maiúsculas e minúsculas, incluindo o jQuery 1.8+?

91

Estou tentando usar maiúsculas e minúsculas "contém" de maneira insensível. Tentei usar a solução na seguinte questão stackoverflow, mas não funcionou:

Existe um seletor jQuery: contém insensível a maiúsculas e minúsculas?

Por conveniência, a solução é copiada aqui:

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

Aqui está o erro:

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

É aqui que estou 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");
    }
  });

Meu uso do "contém" com distinção entre maiúsculas e minúsculas no mesmo cenário funciona sem erros. Alguém tem alguma idéia? Eu apreciaria.

jquery contains case-sensitive case-insensitive Matrym
fonte
No caso de alguém estiver interessado, eu atualizei meu blog em três adicional contém seletores :containsExact, :containsExactCasee :containsRegexseletores agora trabalho em todas as versões do jQuery.
Mottie
Consulte css-tricks.com/snippets/jquery/… ,
Alan Dong
Acho que .filter () é outra boa maneira. Referência
劉鎮 瑲

Respostas:

127

Isso é o que estou usando em um projeto atual, não tive problemas. Veja se você tem mais sorte com este formato:

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

No jQuery 1.8, a API para isso mudou, a versão jQuery 1.8+ disso seria:

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

Você pode testar aqui . Para mais detalhes sobre 1.8+ seletores personalizados, verifique o wiki do Sizzle aqui .

Nick Craver
fonte
Você é um salva-vidas. Obrigado.
Matrym
3
Alguma chance de você falar exatamente sobre o que isso está fazendo?
Abe Miessler,
4
@ClovisSix - obrigado pelo aviso, forneci um método 1.8+ para fazer o mesmo. Avise-me se tiver algum problema.
Nick Craver
1
Para observar que isso não substitui: contém, basta adicionar outro seletor: Contém.
albanx de
3
o seletor deve ser chamado icontains, ou algo semelhante.
Sebastian
43

É importante notar que a resposta está correta, mas cobre apenas :Contains , e não o alias, :containsque pode levar a um comportamento inesperado (ou pode ser usado por design para aplicativos avançados que requerem pesquisa sensível e insensível).

Isso pode ser resolvido duplicando a extensão para o 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; 
};

Levei um tempo para descobrir por que não estava funcionando para mim.

Elipse
fonte
Eu teria comentado isso acima, mas aparentemente não estou conseguindo.
reticências de
5
Não tenho certeza do que você quer chegar aqui. Isso substitui o comportamento esperado e documentado de :contains. Acho que é mais claro deixar o original em :containspaz e chamar seu novo seletor :icontains.
Justin Force
5
Isso não vem ao caso da minha postagem. Criar um seletor alternativo é certamente uma opção válida, no entanto, eu estava apontando que estender: contém, mas negligenciar estender: Contém pode levar à confusão do usuário, quando produzem resultados diferentes.
reticências de
1
Então, obrigado por compartilhar este "te peguei". :) Ainda assim, acho uma boa ideia mencionar que é melhor não substituir o comportamento embutido quando é menos trabalhoso construir um comportamento paralelo não destrutivo.
Justin Force
Eu tentei algumas soluções diferentes postadas para isso e esta finalmente funcionou. obrigado.
taylor michels de
27

Eu faria algo assim 

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

E deixe em :containspaz ...

DEMO

Então, por que o jQuery não o suporta em sua biblioteca ?! se for assim tão fácil ...

porque o seu código passa o código turkey?

Mina Gabriel
fonte
6

Pode ser tarde .... mas,

Eu prefiro ir por aqui ..

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

Dessa forma, você NÃO adulterará o NATIVO '.contains' do jQuery ... Você pode precisar do padrão mais tarde ... se adulterado, você pode voltar ao stackOverFlow ...

ErickBest
fonte
0

vou me permitir adicionar meus amigos:

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

Consegui ignorar a diferenciação de maiúsculas e minúsculas do jQuery para conseguir o que desejo usando o código abaixo:

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

Você pode usar este link para encontrar o código com base em suas versões do jQuery para ignorar a diferenciação de maiúsculas e minúsculas, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Além disso, se você quiser usar: contém e fazer alguma pesquisa, consulte: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- adequadamente

Umesh Patil
fonte