How can I select an element by ID with jQuery using regex?

Question

I have the following input elements:

<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 are constants and I will always know what they are. However RandomString will always be random.

I want to get the value of AAA_RandomString_BBB. I do not want the values from the input elements with ID ending in either _Start or _End.

I tried the folowing:

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

But the above selects all of the input elements that have an ID starting with "AAA_"

I need some way to select using a regex type syntax like:

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

Is this possible? If not, can anyone suggest a method of selecting

score 134 · Accepted Answer · edited May 23 '17 at 11:46

You can combine both selectors in a multiple attribute selector.

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

It will return all the elements that matches all the specified attribute filters:

[id^=AAA_] matches elements with id attribute starting with AAA_, and
[id$=_BBB] matches elements with id attribute ending with _BBB.

Another generic alternatives:

Using a custom :regex() selector,
Using a .filter()-based approach.

score 17 · Answer 2 · answered Nov 24 '12 at 14:03

17

Use this:

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

Fiddle: http://jsfiddle.net/J6hGx/

answered Nov 24 '12 at 14:03

Praveen Kumar Purushothaman

164,888
24
203
252

score 8 · Answer 3 · answered Nov 24 '12 at 14:07

8

You can look for id's starting with AAA and ending with BBB like this:

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

The working fiddle: http://jsfiddle.net/DN9uV/

answered Nov 24 '12 at 14:07

vvohra87

5,594
4
22
34

score 8 · Answer 4 · edited May 23 '17 at 12:17

8

This can be done like so:

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

You can give use $('input', <context>) to make the search more precise. See also here

edited May 23 '17 at 12:17

Community

1
1

answered Nov 24 '12 at 14:15

beipawel

443
4
15

score 0 · Answer 5 · edited Jan 06 '14 at 12:04

I use to solve this with the class selectors which don't need to be unique.

This also has a positive effect on speed because no complex search is required Additionally you can use this for the different styling of different elements

e.g.

<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>

Now you can simply use the class selector

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

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

score 0 · Answer 6 · answered Nov 24 '12 at 18:20

0

It would be better to just check for the id ending on _BBB by

 $("[id$=_BBB]")

answered Nov 24 '12 at 18:20

Huzaifa Qamer

314
2
4
17

score 0 · Answer 7 · answered Apr 14 '17 at 06:25

How about this :

<!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>

How can I select an element by ID with jQuery using regex?

7 Answers7

Use this:

Fiddle: http://jsfiddle.net/J6hGx/

Linked