使用 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;
  }
}

现在，我想匹配每个 select 或具有 background: #f4c13b; 的，因此捕获组将 return：.selector, .selector2 和 .selector3:hover 和 #selector4.class 和 selector5.

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

不幸的是，它只匹配第一个 background: #f4c13b; 的 selector 属性，所以如果 { 和 background: #f4c13b; 之前有东西不匹配:(

这是这背后的基本思想，每个 selector 都在新行上，所以我想匹配并捕获 { 之前的所有内容，然后是 select [之前的所有内容=13=] 然后是 } 之前的所有内容，这样我就可以从第一个捕获组中提取 selectors。

我正在使用 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);

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

Match all CSS selectors that have a certain property and value with RegEx

javascript

regex

regex-negation

regex-lookarounds

regex-greedy

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

Match all CSS selectors that have a certain property and value with RegEx

javascript

regex

regex-negation

regex-lookarounds

regex-greedy

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