javascript - 在 JavaScript/jQuery 中解析 CSS

Question

我正在尝试在 JavaScript 中实现 CSS 解析，以便:

a {
  color: red;
}

被解析成对象:

{
  'a' {
    'color': 'red'
  }
}

首先，是否有我可以使用的 JavaScript/jQuery 库？

我的实现非常基础，所以我确信它无论如何都不是万无一失的。例如，它适用于基本 CSS，但适用于以下类型的属性:

background: url(data:image/png;base64, ....);

它失败了，因为我正在使用 split(';') 来分隔 property:value 对。这里，; 出现在 value 中，所以它也在那个点 split 。

有其他方法吗？

代码如下:

parseCSS: function(css) {
    var rules = {};
    css = this.removeComments(css);
    var blocks = css.split('}');
    blocks.pop();
    var len = blocks.length;
    for (var i = 0; i < len; i++)
    {
        var pair = blocks[i].split('{');
        rules[$.trim(pair[0])] = this.parseCSSBlock(pair[1]);
    }
    return rules;
},

parseCSSBlock: function(css) { 
    var rule = {};
    var declarations = css.split(';');
    declarations.pop();
    var len = declarations.length;
    for (var i = 0; i < len; i++)
    {
        var loc = declarations[i].indexOf(':');
        var property = $.trim(declarations[i].substring(0, loc));
        var value = $.trim(declarations[i].substring(loc + 1));

        if (property != "" && value != "")
            rule[property] = value;
    }
    return rule;
},

removeComments: function(css) {
    return css.replace(/\/\*(\r|\n|.)*\*\//g,"");
}

谢谢!

Answer 1

可以很方便的使用浏览器自带的CSSOM来解析CSS:

var rulesForCssText = function (styleContent) {
    var doc = document.implementation.createHTMLDocument(""),
        styleElement = document.createElement("style");

   styleElement.textContent = styleContent;
    // the style will only be parsed once it is added to a document
    doc.body.appendChild(styleElement);

    return styleElement.sheet.cssRules;
};

对于每个返回的规则，您可以查看 rule.style 中的属性。参见 http://jsfiddle.net/v2JsZ/举个例子。