Esiste un jQuery senza distinzione tra maiuscole e minuscole: contiene selettore?
-
06-07-2019 - |
Domanda
Esiste una versione senza distinzione tra maiuscole e minuscole del : contiene selettore jQuery o devo fare il lavoro manualmente eseguendo il ciclo su tutti gli elementi e confrontando il loro .text () con la mia stringa?
Soluzione
Quello che ho finito per fare per jQuery 1.2 è:
jQuery.extend(
jQuery.expr[':'], {
Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0"
});
Questo estenderà jquery per avere un: Contiene selettore senza distinzione tra maiuscole e minuscole, il: selettore rimane invariato.
Modifica: per jQuery 1.3 (grazie @ user95227) e versioni successive è necessario
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
Modifica: Apparentemente accedendo direttamente al DOM usando
(a.textContent || a.innerText || "")
anziché
jQuery(a).text()
Nell'espressione precedente la velocizza considerevolmente quindi prova a tuo rischio se la velocità è un problema. (vedi @John 's domanda )
Ultima modifica: per jQuery 1.8 dovrebbe essere:
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Altri suggerimenti
Per renderlo facoltativamente insensibile al maiuscolo / minuscolo: 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;
}
});
quindi usa : conteneresi
invece di :contains
A partire da jQuery 1.3, questo metodo è obsoleto. Per farlo funzionare, deve essere definito come una funzione:
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
Se qualcuno (come me) è interessato, cosa significano a e m [3] nella definizione Contiene .
CHIAVE / LEGGENDA: Params resi disponibili da jQuery per l'uso nelle definizioni dei selettori:
r = jQuery array di elementi da esaminare. (ad esempio: r.length = Numero di elementi)
i = indice dell'elemento attualmente sotto esame, all'interno dell'array r .
a = elemento attualmente sotto esame. L'istruzione selector deve restituire true per includerla nei risultati corrispondenti.
m [2] = nodeName o * che stiamo cercando (a sinistra dei due punti).
m [3] = param passato in: selector (param). In genere un numero indice, come in : nth-of-type (5) , o una stringa, come in : color (blu) .
In jQuery 1.8 dovrai usare
jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {
return function (elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Una variazione che sembra funzionare leggermente più velocemente e che anche consente espressioni regolari è:
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);
}
);
Non solo non distingue tra maiuscole e minuscole, ma consente ricerche potenti come:
-
$ (" p: IncludesCI ('\\ bup \\ b') ")
(Corrisponde a " Su " o " su " ;, ma non " superiore " ;, " ; wakeup " ;, ecc.) -
$ (" p: contieneCI ('(?: Rosso | Blu) stato') ")
(Corrisponde a "stato rosso" o "quotato stato blu", ma non " up state " ;, ecc.) -
$ (" p: IncludesCI ('^ \\ s * Stock?') ")
(Corrisponde a "stock" o "quot" stock ", ma solo all'inizio del paragrafo (ignorando qualsiasi spazio bianco iniziale).
Potrebbe essere in ritardo .... ma,
Preferirei andare così ..
$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
In questo modo, NON manomettere il NATIVE '.contains' di jQuery ... potrebbe essere necessario quello predefinito in seguito ... se manomesso, potresti ritrovati a stackOverFlow ...
jQuery.expr[':'].contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
Il codice di aggiornamento funziona alla grande in 1.3, ma " contiene " dovrebbe essere in minuscolo sulla prima lettera a differenza dell'esempio precedente.
Fai riferimento di seguito per utilizzare ": contiene " per trovare testo che ignora la distinzione tra maiuscole e minuscole da un codice 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");
}
});
Puoi anche utilizzare questo link per trovare casi che ignorano il codice in base alla tua versione di jquery, Crea jQuery: contiene senza maiuscole / minuscole
Ho avuto un problema simile con il seguente non funziona ...
// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');
Funziona e senza la necessità di un'estensione
$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');
Anche questo funziona, ma probabilmente rientra nel " loop manuale " categoria ....
$('div.story span.Quality').contents().filter(function()
{
return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');
Una versione più veloce che usa espressioni regolari.
$.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());
};