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

预先感谢您的帮助，RegEx 总是难倒我。

Answer 1

您可以使用以下正则表达式

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

解释:

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

Demo

RegEx101 Demo