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; 전 모든 것을 선택하고 } 전의 모든 것을 선택하여 selecto를 추출 할 수 있습니다. rs.

정규 표현식을 테스트하기 위해 regexr.com을 사용하고 있으며 자바 스크립트는 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);