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;の前にすべてを選択してから}の前にすべてを選択して、第1の捕捉グループからのrs。

私は式をテストするために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);