CSS到JSON解析器或转换器

Question

我正在没有HTML或CSS层的纯Web平台上工作，只是一个纯JavaScript实现。

我想使用AJAX将CSS文件作为文本字符串加载，将CSS解析为JS对象或JSON，然后使用实用程序库来解释应将哪种样式应用于DOM树中的元素。

我该怎么做？

Answer 1

我认为您正在寻找“ JavaScript CSS解析器”。

您看过其中两个吗？

http://www.glazman.org/JSCSSP/

或

http://bililite.com/blog/2009/01/16/jquery-css-parser/

第一个看起来很合适，但是如果您喜欢jQuery，那么您可能更喜欢第二个。

HTH

Answer 2

我查看了@ amir75建议的两个链接。第一次看起来最好，但是对于我正在做的事情，代码太长了。我决定将一个轻量级的脚本放在一起。它不使用jQuery，但是如果您想使用.get()等加载CSS文件，则可以使用。请看一下example.html和js控制台输出来看一下结构。如果您在CSS中使用注释，则可以选择保留元素的顺序，否则在使用更简单的JSON结构时，它将仍然保留元素的顺序，但不保留注释的顺序。

https://github.com/aramkocharyan/CSSJSON

用法：

// To JSON, ignoring order of comments etc
var json = CSSJSON.toJSON(cssString);

// To JSON, keeping order of comments etc
var json = CSSJSON.toJSON(cssString, true);

// To CSS
var css = CSSJSON.toCSS(jsonObject);

Answer 3

尝试下面的代码“不带任何外部库：

function cssToJson(cssStr){
var tmp="";
//handling the colon in psuedo-classes
var openBraces=0;
for(var i=0;i<cssStr.length;i++){
    var c=cssStr[i];
    if(c=="{"){openBraces++;}
    else if(c=="}"){openBraces--;}
    if(openBraces==0 && c==":"){
        tmp+="_--_";
    } else {
        tmp+=c;
    }
}
cssStr=tmp;
cssStr=cssStr.split(" ").join("_SPACE_");
cssStr=cssStr.split("\r").join("");
cssStr=cssStr.split("\n").join("");
cssStr=cssStr.split("\t").join("");
cssStr=cssStr.split("}").join("\"}####\"");
cssStr=cssStr.split(";\"").join("\"");
cssStr=cssStr.split(":").join("\":\"");
cssStr=cssStr.split("{").join("\":{\"");
cssStr=cssStr.split(";").join("\",\"");
cssStr=cssStr.split("####").join(",");
cssStr=cssStr.split("_--_").join(":");
cssStr=cssStr.split("_SPACE_").join(" ");
if(cssStr.endsWith(",")){
    cssStr=cssStr.substr(0,cssStr.length-1);
}
if(cssStr.endsWith(",\"")){
    cssStr=cssStr.substr(0,cssStr.length-2);
}
cssStr="{\""+cssStr+"}";
try{
    var jsn=JSON.parse(cssStr);
    return jsn;
} catch(e){
    console.log(e);
    return null;
}
}