jQueryセレクター正規表現


580

私は、jQueryセレクターでのワイルドカードまたは正規表現(正確な用語はわかりません)の使用に関するドキュメントの後にいます。

私はこれを自分で探しましたが、構文とその使用方法に関する情報を見つけることができませんでした。誰かが構文のドキュメントがどこにあるか知っていますか?

編集:属性フィルターを使用すると、属性値のパターンに基づいて選択できます。

回答:


340

James Padolseyは、正規表現を選択に使用できるようにする素晴らしいフィルターを作成しました。

あなたが次のものを持っているとしましょうdiv

<div class="asdf">

Padolseyの:regexフィルターは次のように選択できます。

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

また、セレクター公式ドキュメントも確認してください。


3
OK。私はそこに行ったことがありますが、探していたものの名前を本当に知りませんでした。私は別の外観を持ち、属性フィルターを使用することは私が追求したものです。
Joel Cunningham、

@padolseyによる正規表現セレクターはうまく機能します。これを使用して、テキスト、ファイル、チェックボックスの入力フィールドまたはテキストエリアを反復処理できる例を次に示します。$ j( 'input:regex(type、text | file | checkbox)、textarea')。each(function(index){// ...});
Matt Setter

13
以下のnickfからの回答が受け入れられます。この回答を読んでいる場合は、必ずその回答を読んでください!
Quentin Skousen 2014

5
エラー:構文エラー、認識されない式:サポートされていない疑似:regex
ryan2johnson9

2
-1。これを実装するコードは回答に含まれておらず、リンクの腐敗の影響を受けやすくなっています。コードをテストしながら加えて、私は2つのバグを発見した-それは(置換することによって解決それらを含む正規表現からコンマを落とすであろうmatchParams.join('')matchParams.join(','))と一致していることを任意のパターン'undefined'または'null'一致するundefinednull、それぞれ、。この2番目のバグは、テストされた値!== undefined!== null最初に確認することで解決できます。どちらの方法でも、関数をに渡す方.filter()が簡単で、わかりやすく、読みやすくなっています。
ジェームズT

732

このfilter関数を使用して、より複雑な正規表現マッチングを適用できます。

以下は、最初の3つのdivに一致する例です。

$('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>


match(/ abc + d /)の代わりに変数を使用する方法 ?
Sasi varna kumar 2015年

2
@Sasivarnakumarこの質問の答えはこちら
フェリペマイア

283

これらは役に立ちます。

Containsで検索しいる場合は、次のようになります

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

Starts Withで検索すると、次のようになります。

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

Ends Withで検索すると、次のようになります。

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

与えられた文字列ではない要素を選択したい場合

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

名前にスペースで区切られた特定の単語を含む要素を選択する場合

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

特定の文字列と等しいか、その文字列で始まりハイフンが続く要素を選択する場合

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

3
グレート答えが、idSは、識別子であること、スペースを含めることはできません~=例が何か他のもの、のように変更する必要がありclass、識別子の空白区切りのリストです。のようなclassものは、~=属性セレクターが意図したものです。
なコード

49

正規表現の使用が、属性が特定の文字列で始まるかどうかのテストに限定されている場合は、^JQueryセレクターを使用できます。

たとえば、「abc」で始まるIDのdivのみを選択する場合は、次のように使用できます。

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

正規表現の使用を回避するための非常に便利なセレクターがたくさんあります:http : //api.jquery.com/category/selectors/attribute-selectors/


これは、大文字と小文字を区別しない一致要件では機能しません。.filter関数は、これらのニーズによりよく適合します。
brainondev 2014

2
これは私のためによかった、私はちょうど私が使用して、入力されたIDの末尾に「__destroy」があったかどうかを確認したかった*=。このように$("input[id*='__destroy'][value='true']")
ryan2johnson9


8

jQuery関数を追加します。

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

そして、

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

/ Sent /に一致するテキストを持つすべてのスパン要素を選択します。

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

/tooltip.year/に一致するクラスを持つすべてのスパン要素を選択します。




2

私はちょうど私のリアルタイムの例を挙げています:

ネイティブJavaScriptでは、次のスニペットを使用して、IDが「select2-qownerName_select-result」で始まる要素を見つけました。

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

javascriptからjQueryに移行したとき、上記のスニペットを次のように置き換えました。

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


jQueryなしで見つけた唯一のオプションで、最も効率的なオプションです。ありがとうございました!
ggonmar

1

特定の文字列を含む要素を選択する場合は、次のセレクターを使用できます。

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.