Regex for css data attribute selectors

Question

Trying to post-process some CSS here and need a regex to select data-attribute selectors in CSS.

It will need to select the following selectors (just the selector but in it's entirety):

[data-attr] {
 // some css
}

.cool-class[data-another-attr] {
 // some css
}

#id[data-one-more-attr] {
 //  some css
}

So that would select [data-attr], .cool-class[data-another-attr] and #id[data-one-more-attr].

/(\[data-*)\w/g

Thanks in advance for your help, RegEx always stumps me.

Do you need only the name of data attribute or all the style properties in it — Tushar
– Tushar, Commented Jul 21, 2015 at 15:04
Might be a bit too loose, but this will get you started I guess: /([.+]?\[data\-(.+)\])/g: regexr.com/3be7m — Bjorn
– Bjorn, Commented Jul 21, 2015 at 15:05

Tushar · Accepted Answer · 2015-07-21 15:11:02Z

3

You can use following regex

((#|\.)?[\w-]+)?(\[data(-\w+)+\])/g

Explanation:

answered Jul 21, 2015 at 15:09

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1