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

到目前为止我所拥有的（甚至没有接近）：

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

提前感谢您的帮助，RegEx 总是难倒我。

Answer 1

您可以使用以下regex

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

解释：

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

演示

RegEx101 演示