Javascript 解析CSS背景图像和选择器

我需要解析一段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>

我有兴趣匹配url（图像），然后获取其选择器。

使用

CSS

作语法分析

Javascript

var source = document.getElementById("source"),
    ss,
    parser,
    sheet,
    length1,
    index1,
    length2,
    index2,
    myArray,
    cssRule,
    declaration,
    selector,
    bg;

document.getElementById("parse").addEventListener("click", function () {
    ss = source.value;
    parser = new CSSParser();
    sheet = parser.parse(ss, false, true);

    if (sheet) {
        myArray = [];
        for (index1 = 0, length1 = sheet.cssRules.length; index1 < length1; index1 += 1) {
            cssRule = sheet.cssRules[index1];
            selector = cssRule.mSelectorText;
            for (index2 = 0, length2 = cssRule.declarations.length; index2 < length2; index2 += 1) {
                declaration = cssRule.declarations[index2];
                if (declaration.property === "background-image") {
                    bg = declaration.valueText.match(/url\((\S+)\)/i)[1];
                    myArray.push({
                        "selector": selector,
                        "bg": bg
                    });

                    break
                }
            }
        }

        console.log(myArray);
    }
});

var source=document.getElementById（“source”），
党卫军,，
解析器，
床单，
长度1，
index1，
长度2，
index2，
myArray，
cssRule，
宣言，
选择器，
bg；
document.getElementById（“解析”）.addEventListener（“单击”），函数（）{
ss=源值；
parser=new CSSParser（）；
sheet=parser.parse（ss，false，true）；
若有（第页）{
myArray=[]；
对于（index1=0，length1=sheet.cssRules.length；index1

第二场比赛呢

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

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

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

---

你能指望有效的CSS样式表吗？或者你必须考虑所有的可能性？为什么不简单地去做呢？看看window.getComputedStyles Javascript方法。不完全是你想要的，但是你可以把它包装在一个修改过的函数中，其中包括选择器。。。

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

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

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

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

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