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

你可以关注regex

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

说明：

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

Demo

RegEx101 Demo