web-dev-qa-db-ja.com

正規表現を使用してjQueryでIDで要素を選択するにはどうすればよいですか？

次の入力要素があります。

<input id="AAA_RandomString_BBB" type="text" />
<input id="AAA_RandomString_BBB_Start" type="text" />
<input id="AAA_RandomString_BBB_End" type="text" />

AAAとBBBは定数であり、それらが何であるかを常に知っています。ただし、RandomStringは常にランダムになります。

AAA_RandomString_BBBの値を取得したい。 IDが_Startまたは_Endで終わる入力要素の値は必要ありません。

私は次のことを試しました：

$('[id^="AAA_"]')

ただし、上記では、「AAA_」で始まるIDを持つすべての入力要素が選択されます

次のような正規表現タイプの構文を使用して選択する方法が必要です。

$('[id^="AAA_(.+?)_BBB"]')

これは可能ですか？そうでない場合、誰でも選択方法を提案できますか

javascriptjqueryregex
56
user1762489

複数属性セレクター で両方のセレクターを組み合わせることができます。

​$("[id^=AAA_][id$=_BBB]")

指定されたすべての属性フィルターに一致するすべての要素を返します。

  • [id^=AAA_] は、AAA_で始まるid属性を持つ要素と一致します。
  • [id$=_BBB] は、_BBBで終わるid属性を持つ要素と一致します。

別の一般的な選択肢：

121
Alexander

これを使って：

$('[id^="AAA_"][id$="_BBB"]')

フィドル： http://jsfiddle.net/J6hGx/

14
Praveen Kumar Purushothaman

次のように、AAAで始まりBBBで終わるIDを検索できます。

​$("[id^=AAA_][id$=_BBB]")

作業フィドル： http://jsfiddle.net/DN9uV/

7
Varun Vohra

これは次のように実行できます。

_$('input').filter(function(){ return this.id.match(/^AAA_.+_BBB$/) })
_

Use $('input', <context>)を指定して、検索をより正確にすることができます。 here も参照してください

7
beipawel

一意である必要のないクラスセレクタでこれを解決するために使用します。

これは、複雑な検索が必要ないため、速度にもプラスの効果があります。さらに、さまざまな要素のさまざまなスタイリングにこれを使用できます。

例えば.

<elem id="1" class="aa">element type aa</elem>
<elem id="2" class="aa">element type aa</elem>
<elem id="3" class="aa bb">element type aa and bb</elem>
<elem id="4" class="bb">element type bb</elem>

これで、クラスセレクターを使用できます

$('.aa').click(function(){
     console.log( 'clicked type aa #' + $(this).attr('id') );
});

$('.bb').click(function(){
     console.log( 'clicked type bb #' + $(this).attr('id') );
});
1
Michel Feldheim

_BBBで終わるIDを確認するだけの方が良いでしょう

 $("[id$=_BBB]")
0
Huzaifa Qamer

これはどう ：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
        <input id="AAA_RandomString_BBB" type="text" />
        <input id="AAA_RandomString_BBB_Start" type="text" />
        <input id="AAA_RandomString_BBB_End" type="text" />

        <script>
            $(document).ready(function () {
                debugger
                var targetElement = $('input')
                .filter(function () {
                    var el = this.id.match(/^AAA.*BBB$/g);
                    return el;
                });
                console.log(targetElement.val());
            })
        </script>
    </body>
</html>
0
Bimal Das