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

Question

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

需要选择以下选择器（只是选择器，但整个选择器）：

setContentView()

这样就可以选择[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]。

What I have so far（甚至没有关闭）：

#id[data-one-more-attr]

在此先感谢您的帮助，RegEx总是让我感到困惑。

Answer 1

您可以使用以下regex

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

<强>解释

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

Demo

RegEx101 Demo