Esiste un jQuery senza distinzione tra maiuscole e minuscole: contiene selettore?

Esiste una versione senza distinzione tra maiuscole e minuscole di : contiene il selettore jQuery o devo fare il lavoro manualmente eseguendo il ciclo su tutti gli elementi e confrontando il loro .text () con la mia stringa?

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 selettore: Contiene che non fa distinzione tra maiuscole e minuscole, il selettore: contiene 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 || "") 

invece di

jQuery(a).text()

Nell'espressione precedente la velocizza notevolmente quindi prova a tuo rischio e pericolo se la velocità è un problema. (vedi la domanda di @John )

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;
    };
});

Per renderlo facoltativamente insensibile alle maiuscole / minuscole: 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 utilizzare :containsiinvece 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 significa a e m [3] nella definizione di Contiene .

LEGENDA / LEGENDA: Params resi disponibili da jQuery per l'uso nelle definizioni dei selettori:

r = jQuery array di elementi da esaminare. (es: 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 nel: selettore (param). Tipicamente un numero indice, come in : nth-of-type (5) , o una stringa, come in : color (blu) .

In jQuery 1.8 dovrai utilizzare

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 consente anche 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:containsCI('\\bup\\b')") (Corrisponde a "Su" o "Su", ma non "superiore", "Riattivazione", ecc.)
• $("p:containsCI('(?:Red|Blue) state')") (Corrisponde a "stato rosso" o "stato blu", ma non a "stato attivo", ecc.)
• $("p:containsCI('^\\s*Stocks?')") (Corrisponde a "stock" o "stock", ma solo all'inizio del paragrafo (ignorando qualsiasi spazio bianco iniziale).)

Potrebbe essere in ritardo .... ma,

Preferirei andare in questo modo ..

$.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 ... Potresti aver bisogno di quello predefinito in seguito ... se manomesso, potresti ritrovarti a impilare OverFlow ...

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

Il codice di aggiornamento funziona benissimo 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 il 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 usare questo link per trovare il caso che ignora il codice in base alla tua versione di jquery, Crea jQuery: contiene senza distinzione tra maiuscole e minuscole

Una versione più veloce usando 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());
};

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 nella categoria "ciclo manuale" ....

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

Nuova una variabile le do il nome subString e metto la stringa che vuoi cercare in alcuni elementi di testo. Quindi usando il selettore Jquery seleziona gli elementi di cui hai bisogno come il mio esempio $("elementsYouNeed")e filtra per .filter(). In .filter()esso confronterà ogni elemento $("elementsYouNeed")con la funzione.

Nella funzione .toLowerCase()che sto usando per il testo dell'elemento anche sottostringa che può evitare la distinzione tra maiuscole e minuscole e controllare se vi è una sottostringa. Successivamente, il .filter()metodo crea un nuovo oggetto jQuery da un sottoinsieme degli elementi corrispondenti.

Ora puoi ottenere gli elementi di corrispondenza in matchObjects e fare quello che vuoi.

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

var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});