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

Question

正在尝试 post-在这里处理一些 CSS 并且需要一个正则表达式来 select 数据属性 select 或者 CSS.

它需要 select 以下 select 或（只是 select 或完整）：

[data-attr] {
 // some css
}

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

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

这样 select [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