javascript - 解析 CSS 背景图像和选择器

Question

我需要解析一段 CSS。示例:

<style ...>
.foo , #bar {
   /*some css code here*/
   background-image: url(image.png);
 }

 p { 
   background: url(image2.png) repeat-x;
   font-size: 1em;
 }

 a {
   font-size: 1.1em;
 }

</style>

我想将其转换为以下数组:

[
 {"selector":".foo , #bar", "bg":"image.png"},
 {"selector":"p", "bg":"image2.png"}
]

我有兴趣匹配 url(IMAGE) 然后获取它的选择器。

Answer 1

(?<selector>\n.*?)[^{}](\{.+?(?<=url\()(?<image>[^\)]*).+?\})

在您的 <script> 上发布 block 会给你一个有 2 个命名组的正则表达式

regex.groups("selector") = ".foo, #bar"
regex.groups("image") = "image.png"

第二场比赛

regex.groups("selector") = "P"
regex.groups("image") = "image2.png"

或者您可以在正则表达式中使用“image.png”来获取:

\n(?<selector>[^{]*?){(?<t>.+)(?<image>image.png)

得到结果

regex.groups("selector") = ".foo, #bar"