使用 RegEx 匹配所有具有特定属性和值的 CSS 选择器

Question

我有一种感觉，我正在尝试做的事情真的很容易，但我现在已经坚持了一段时间，所以非常感谢你的一点帮助，这是我得到的一个例子：

.selector, .selector2 {
  color: #fff;  
  background: #f4c13b;
  opacity: 1;
}

.selector3:hover {
  color: red;
  opacity: 0;
  background: #f4c13b;
}

#selector4.class {
  background: #f4c13b;
  color: red;
}

@media (min-width:320px) {
  selector5 {
    opacity: 1;
    background: #f4c13b;
  }
}

现在，我想匹配每个具有 background: #f4c13b; 的选择器，因此捕获组将返回：.selector, .selector2 和 .selector3:hover 和 #selector4.class 和 selector5。

这是我目前得到的：/(.*) {[\S\s][^background]*background: #f4c13b;/gm

不幸的是，它只匹配将background: #f4c13b; 作为第一个属性的选择器，因此如果在{ 和background: #f4c13b; 之前有某些内容，它将不匹配:(

这是这背后的基本思想，每个选择器都在新行上，所以我想匹配并捕获{之前的所有内容，然后选择background: #f4c13b;之前的所有内容，然后选择}之前的所有内容，这样我就可以从第一个捕获组中提取选择器。

我正在使用 regexr.com 来测试表达式，我猜他们正在使用 JavaScript 风格的 RegEx。非常感谢您的帮助和解释，谢谢！

Answer 1

你可以使用这个正则表达式：/([.#]?[\w, .:]+?)(?= \{[^}]+?background: #f4c13b;[^}]+?\}\s*)/g

说明：

/                               : regex delimiter
    (                           : start group 1
        [.#]?                   : optional dot or hash
        [\w, .:]+?              : 1 or more alphanum, comma, space, dot, semicolumn, not greedy
    )                           : end group 1
    (?=                         : lookahead
        \{                      : open curly bracket
        [^}]+                   : 1 or more any char that is not close curly bracket
        background: #f4c13b;    : literally
        [^}]+?                  : 1 or more any char that is not close curly bracket, not greedy
        \}                      : close curly bracket
        \s*                     : 0 or more "spaces" including linebreak
    )                           : end lookahead
/g                              : regex delimiter, global flag

实际操作：

var x = `.selector, .selector2 {
  color: #fff;  
  background: #f4c13b;
  opacity: 1;
}

.selector3 {
  color: red;
  opacity: 0;
  background: #ffffff;
}

.selector3:hover {
  color: red;
  opacity: 0;
  background: #f4c13b;
}

#selector4 {
  color: red;
  opacity: 0;
  background: #f4c13b;
}

selector5 {
  color: red;
  opacity: 0;
  background: #f4c13b;
}
@media (min-width:320px) {
  selector6 {
    opacity: 1;
    background: #f4c13b;
  }
}`;
var r = x.match(/([.#]?[\w, .:]+?)(?= \{[^}]+?background: #f4c13b;[^}]+?\}\s*)/g);
console.log(r);