Gibt es eine Groß- und Kleinschreibung ohne Berücksichtigung von jQuery: enthält Selektor?


145

Gibt es eine Version des : enthält jQuery-Selektors, bei der die Groß- und Kleinschreibung nicht berücksichtigt wird, oder sollte ich die Arbeit manuell ausführen, indem ich alle Elemente durchlaufe und deren .text () mit meiner Zeichenfolge vergleiche?


2
Für jQuery 8.1 + überprüfen Sie diese Antwort
Praveen

1
^ Das ist 1.8.1, nicht 8.1.
TylerH

Gutes Beispiel hier .
瑲 瑲

Antworten:


125

Was ich letztendlich für jQuery 1.2 gemacht habe, ist:

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

Dadurch wird die Abfrage erweitert, um einen: Enthält einen Selektor, bei dem die Groß- und Kleinschreibung nicht berücksichtigt wird. Der: enthält-Selektor bleibt unverändert.

Bearbeiten: Für jQuery 1.3 (danke @ user95227) und später benötigen Sie

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

Bearbeiten: Anscheinend direkt mit auf das DOM zugreifen

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

anstatt

jQuery(a).text()

Im vorherigen Ausdruck wird es erheblich beschleunigt. Versuchen Sie es also auf eigenes Risiko, wenn Geschwindigkeit ein Problem darstellt. (siehe @ John ‚s Frage )

Letzte Änderung: Für jQuery 1.8 sollte es sein:

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

Ich wollte die Leute nur wissen lassen, dass die von @Pat und anderen für jQuery 1.3 beschriebene Lösung auch für 1.4.3 funktioniert.
Jim Ade

Link zu @ Johns Frage / Antwort, da der Link hier gelöscht wurde: stackoverflow.com/questions/1407434/…
Mottie

Dies funktioniert nicht für jQuery 1.8. Siehe die Antwort von seagullJS unten für eine aktualisierte Version - stackoverflow.com/a/12113443/560114
Matt Browne

105

Um es optional ohne Berücksichtigung der Groß- und Kleinschreibung zu machen: 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;
  }
});

dann :containsianstelle von verwenden:contains


3
Das Hinzufügen einer neuen Funktion ist für mich am besten, als sie zu überschreiben. Ich verwende jetzt diese Option (funktioniert wie ein Zauber)
GôTô

22
Dies sollte zur Standard-JQuery-Bibliothek hinzugefügt werden
user482594

41

Ab jQuery 1.3 ist diese Methode veraltet. Damit dies funktioniert, muss es als Funktion definiert werden:

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

38

Wenn jemand (wie ich) interessiert ist, was bedeuten a und m [3] in der Definition von Enthält .


KEY / LEGEND: Von jQuery zur Verwendung in den Selektordefinitionen bereitgestellte Parameter:

r = jQuery-Array von Elementen, die geprüft werden. (zB: r.length = Anzahl der Elemente)

i = Index des aktuell untersuchten Elements innerhalb des Arrays r .

a = Element, das derzeit geprüft wird. Die Selector-Anweisung muss true zurückgeben, um sie in die übereinstimmenden Ergebnisse aufzunehmen.

m [2] = Knotenname oder *, nach dem wir suchen (links vom Doppelpunkt).

m [3] = Parameter übergeben an:: Selektor (Parameter). In der Regel eine Indexnummer wie in : n-ter Typ (5) oder eine Zeichenfolge wie in : Farbe (blau) .


31

In jQuery 1.8 müssen Sie verwenden

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

2
Hat perfekt funktioniert, danke! Gerade auf 1.8 aktualisiert und dies funktioniert nicht mehr.
Andreas

3
Danke für das Update. Gerade auf JQuery 1.8 aktualisiert und es funktioniert nicht mehr
Wasim

15

Eine Variation, die etwas schneller zu funktionieren scheint und auch reguläre Ausdrücke zulässt, ist:

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



Dies unterscheidet nicht nur die Groß- und Kleinschreibung nicht, sondern ermöglicht auch leistungsstarke Suchvorgänge wie:

  • $("p:containsCI('\\bup\\b')") (Entspricht "Up" oder "Up", aber nicht "Upper", "Wakeup" usw.)
  • $("p:containsCI('(?:Red|Blue) state')") (Entspricht "roter Zustand" oder "blauer Zustand", jedoch nicht "Aufwärtszustand" usw.)
  • $("p:containsCI('^\\s*Stocks?')") (Entspricht "Aktie" oder "Aktien", jedoch nur am Anfang des Absatzes (wobei führende Leerzeichen ignoriert werden).)

11

Kann zu spät sein ... aber,

Ich würde lieber diesen Weg gehen ..

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

Auf diese Weise manipulieren Sie NICHT jQuerys NATIVE '.contains' ... Möglicherweise benötigen Sie später die Standardeinstellung ... Wenn Sie manipuliert werden, befinden Sie sich möglicherweise wieder bei stackOverFlow ...


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

Der Update-Code funktioniert in 1.3 hervorragend, aber "enthält" sollte im Gegensatz zum vorherigen Beispiel beim ersten Buchstaben in Kleinbuchstaben geschrieben werden.


1
Ich denke, er wollte eine bestimmte Funktion, damit beide :containsund :Containsbeide gleichzeitig arbeiten.
Joshperry

"Der: enthält Selektor bleibt unverändert."
Harry B

4

Siehe unten, um ": enthält" zu verwenden, um Text zu finden, der die Groß- und Kleinschreibung aus einem HTML-Code ignoriert.

 $.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");
          }              
        });

Sie können diesen Link auch verwenden, um Code zu finden, bei dem Groß- und Kleinschreibung ignoriert wird, basierend auf Ihrer jquery-Version. Make jQuery: enthält Groß- und Kleinschreibung wird nicht berücksichtigt


2

Eine schnellere Version mit regulären Ausdrücken.

$.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());
};

Exzellente Arbeit! Vielen Dank. Ich glaube, dass dies die beste und aktuellste Antwort auf diese Frage ist.
mavrosxristoforos

0

Ich hatte ein ähnliches Problem mit dem folgenden nicht funktioniert ...

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

Dies funktioniert und ohne die Notwendigkeit einer Erweiterung

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

Dies funktioniert auch, fällt aber wahrscheinlich in die Kategorie "Manuelles Looping" ....

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

0

Neu eine Variable Ich gebe ihr den Namen subString und füge einen String, den du suchen möchtest, in einen Elementtext ein. Wählen Sie dann mit dem Jquery-Selektor Elemente aus, die Sie wie in meinem Beispiel benötigen, $("elementsYouNeed")und filtern Sie nach .filter(). Im .filter()wird jedes Element $("elementsYouNeed")mit der Funktion verglichen .

In der Funktion i, die .toLowerCase()für Elementtext verwendet wird, wird auch ein SubString verwendet, bei dem zwischen Groß- und Kleinschreibung unterschieden werden kann, und es wird geprüft, ob ein SubString darin enthalten ist. Danach erstellt die .filter()Methode ein neues jQuery-Objekt aus einer Teilmenge der übereinstimmenden Elemente.

Jetzt können Sie die Match-Elemente in matchObjects abrufen und tun, was Sie wollen.

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

var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.