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

預先感謝您的幫助，正則表達式總是樹樁我。

Answer 1

您可以使用下面regex

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

說明：

1. (#|\.)?：匹配#或.文字可選
2. [\w-]+：匹配任何字母數字字符與-任意次數
3. ((#|\.)?[\w-]+)?：匹配CSS id或class選擇任選的（?）
4. (\[data(-\w+)+\])：匹配data屬性

Demo

RegEx101 Demo