css数据属性选择器的正则表达式

Question

试图在这里后处理一些CSS，并需要一个正则表达式来选择CSS中的数据属性选择器。

这将需要选择以下选择（只选择，但在它的全部）：

[data-attr] { 
// some css 
} 

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

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

因此，这将选择[data-attr]，.cool-class[data-another-attr]和#id[data-one-more-attr]。

What I have so far（甚至还没有接近）：

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

预先感谢您的帮助，正则表达式总是树桩我。

Answer 1

您可以使用下面regex

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

说明：

1. (#|\.)?：匹配#或.文字可选
2. [\w-]+：匹配任何字母数字字符与-任意次数
3. ((#|\.)?[\w-]+)?：匹配CSS id或class选择任选的（?）
4. (\[data(-\w+)+\])：匹配data属性

Demo

RegEx101 Demo