reguläre Ausdrücke des jQuery-Selektors


580

Ich bin nach der Dokumentation über die Verwendung von Platzhaltern oder regulären Ausdrücken (nicht sicher über die genaue Terminologie) mit einem jQuery-Selektor.

Ich habe selbst danach gesucht, konnte jedoch keine Informationen zur Syntax und deren Verwendung finden. Weiß jemand, wo sich die Dokumentation für die Syntax befindet?

BEARBEITEN: Mit den Attributfiltern können Sie basierend auf Mustern eines Attributwerts auswählen.

Antworten:


339

James Padolsey hat einen wunderbaren Filter erstellt , mit dem Regex zur Auswahl verwendet werden kann.

Angenommen, Sie haben Folgendes div:

<div class="asdf">

Padolseys :regexFilter kann es so auswählen:

$("div:regex(class, .*sd.*)")

Überprüfen Sie auch die offizielle Dokumentation zu den Selektoren .


3
OK. Ich war dort, wusste aber nicht genau, wonach ich suchte. Ich habe einen anderen Blick darauf geworfen und nach Attributfiltern gesucht.
Joel Cunningham

Der Regex-Selektor von @padolsey funktioniert hervorragend. Hier ist ein Beispiel, in dem Sie Text-, Datei- und Kontrollkästchen-Eingabefelder oder Textbereiche durchlaufen können: $ j ('Eingabe: Regex (Typ, Text | Datei | Kontrollkästchen), Textbereich'). Each (Funktion (Index) {// ...});
Matt Setter

13
Die Antwort von nickf sollte die akzeptierte sein. Wenn Sie diese Antwort lesen, lesen Sie diese unbedingt!
Quentin Skousen

5
Ich
erhalte

2
-1. Der Code, um dies zu implementieren, ist nicht in der Antwort enthalten und kann Rot verrotten. Außerdem fand ich zwei Fehler während den Code zu testen - es Kommas von regulären Ausdrücken sinken die sie enthalten (gelöst durch Ersetzen matchParams.join('')mit matchParams.join(',')), und jedes Muster , dass Streichhölzer 'undefined'oder 'null'passt auf undefinedund nullsind. Dieser zweite Fehler kann behoben werden, indem der getestete Wert !== undefinedund der !== nullerste überprüft werden . In jedem Fall ist die Übergabe einer Funktion .filter()einfacher und fühlt sich für mich sauberer / lesbarer an.
James T

732

Mit dieser filterFunktion können Sie kompliziertere Regex-Übereinstimmungen anwenden.

Hier ist ein Beispiel, das nur den ersten drei Divs entspricht:

$('div')
  .filter(function() {
    return this.id.match(/abc+d/);
  })
  .html("Matched!");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="abcd">Not matched</div>
<div id="abccd">Not matched</div>
<div id="abcccd">Not matched</div>
<div id="abd">Not matched</div>


wie man Variablen anstelle der Übereinstimmung verwendet (/ abc + d /); ?
Sasi Varna Kumar

2
@ Sasivarnakumar die Antwort auf diese Frage ist hier
Felipe Maia

283

Diese können hilfreich sein.

Wenn Sie von Contains finden, wird es so sein

    $("input[id*='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Wenn Sie nach Starts With suchen, wird es so sein

    $("input[id^='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Wenn Sie nach Ends With suchen, wird es so sein

     $("input[id$='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Wenn Sie Elemente auswählen möchten, deren ID keine bestimmte Zeichenfolge ist

    $("input[id!='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Wenn Sie Elemente auswählen möchten, deren Name ein bestimmtes Wort enthält, das durch Leerzeichen begrenzt ist

     $("input[name~='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

Wenn Sie Elemente auswählen möchten, deren ID einer bestimmten Zeichenfolge entspricht oder mit dieser Zeichenfolge gefolgt von einem Bindestrich beginnt

     $("input[id|='DiscountType']").each(function (i, el) {
         //It'll be an array of elements
     });

3
Gute Antwort, aber da ids Bezeichner sind und kein Leerzeichen enthalten können , sollte das ~=Beispiel in etwas anderes geändert werden , z. B. classeine durch Leerzeichen getrennte Liste von Bezeichnern. Dinge wie classsind, wofür der ~=Attributselektor gedacht war.
Nutzloser Code

49

Wenn Sie nur reguläre Ausdrücke verwenden, um zu testen, ob ein Attribut mit einer bestimmten Zeichenfolge beginnt, können Sie den ^JQuery-Selektor verwenden.

Wenn Sie beispielsweise nur div mit einer ID auswählen möchten, die mit "abc" beginnt, können Sie Folgendes verwenden:

$("div[id^='abc']")

Viele sehr nützliche Selektoren zur Vermeidung der Verwendung von Regex finden Sie hier: http://api.jquery.com/category/selectors/attribute-selectors/


Dies funktioniert nicht bei Anforderungen, bei denen die Groß- und Kleinschreibung nicht berücksichtigt wird. Die Filterfunktion passt besser zu diesen Anforderungen.
Brainondev

2
Das war gut für mich. Ich wollte nur sehen, ob am Ende einer Eingabe-ID ein '__destroy' steht, also habe ich *=$("input[id*='__destroy'][value='true']")
Folgendes


8

Fügen Sie eine jQuery-Funktion hinzu.

(function($){
    $.fn.regex = function(pattern, fn, fn_a){
        var fn = fn || $.fn.text;
        return this.filter(function() {
            return pattern.test(fn.apply($(this), fn_a));
        });
    };
})(jQuery);

Dann,

$('span').regex(/Sent/)

wählt alle Bereichselemente mit Textübereinstimmungen / Gesendet / aus.

$('span').regex(/tooltip.year/, $.fn.attr, ['class'])

wählt alle Span-Elemente mit ihren Klassen aus, die mit /tooltip.year/ übereinstimmen.




2

Ich gebe nur mein Echtzeitbeispiel:

In nativem Javascript habe ich das folgende Snippet verwendet, um die Elemente mit IDs zu finden, die mit "select2-qownerName_select-result" beginnen.

document.querySelectorAll("[id^='select2-qownerName_select-result']");

Als wir von Javascript zu jQuery gewechselt sind, haben wir das obige Snippet durch das folgende ersetzt, das weniger Codeänderungen beinhaltet, ohne die Logik zu stören.

$("[id^='select2-qownerName_select-result']")


Einzige Option, die ich ohne jQuery gefunden habe und die effizienteste. Vielen Dank!
Ggonmar

1

Wenn Sie nur Elemente auswählen möchten, die eine bestimmte Zeichenfolge enthalten, können Sie den folgenden Selektor verwenden:

$(':contains("search string")')

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.