How can I apply a regex on a jQuery selector?

Question

I searched the net a bit but did not find a solution for my problem. This is my selector:

jQuery('[data-group="' + a + '"]').show()

The a is a text like swimming or any word. In HTML it looks like this:

<div data-group="swimming">...</div>

So the above selector would show that div if a = swimming. Now lets say that the data-group contains the word simming, but its not the only one, like this:

<div data-group="swimming,driving,flying">...</div>

How can I still select that div with a selector if a = swimming? I hope you know what I mean :).

Thanks!

Potential duplicate of http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions — pistou, Oct 16 '15 at 12:13

A. Wolff · Accepted Answer · 2015-10-16T12:19:56.877

3

You could use the value contains selector:

jQuery('[data-group*="' + a + '"]').show();

But would match even swimming for a equals swim.

If that matters, then filter it using e.g:

jQuery('[data-group]').filter(function(){
    return this.dataset.group.split(',').indexOf(a) != -1
}).show();

And better if you can change your HTML markup too:

<div data-group="swimming driving flying">...</div>

Then you could use:

jQuery('[data-group~="' + a + '"]').show();

edited Oct 16 '15 at 12:19

answered Oct 16 '15 at 12:12

A. Wolff

74,033
9
94
155

Perfect, changed to ~= and changed my data-group. Thanks! – Arnie Oct 16 '15 at 12:28

score 1 · Answer 2 · answered Oct 16 '15 at 12:16

You can also use .filter()

jQuery('[data-group]').filter(function(){
    return $(this).data('group').split(',').indexOf(a) > -1; //Convert to an array an check whether elements exist in array

    //Using native code
    //return this.dataset.group.split(',').indexOf(a) > -1
}).show();

References: indexOf() and HTMLElement.dataset

How can I apply a regex on a jQuery selector?

2 Answers2