javascript - 将所有具有特定属性和值的 CSS 选择器与 RegEx 匹配

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);