CSS 到 JSON 解析器或转换器答案

【问题标题】：CSS to JSON Parser or ConverterCSS 到 JSON 解析器或转换器
【发布时间】：2011-07-11 13:52:56
【问题描述】：

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

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

我该怎么做？

【问题讨论】：

你将如何用 JSON 表示你的 CSS 样式表？
这是问题的一部分。我愿意接受建议。它不必是严格的 JSON...只是样式的 JS 表示会很好。
参见此处：lesscss.org ... 可能会有所帮助。

标签： javascript css ajax parsing

【解决方案1】：

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

你看过这些吗？

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

或

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

第一个看起来很合适，但如果你喜欢 jQuery，那么也许你更喜欢第二个。

HTH

【讨论】：

我查看了 JCSSP。文档是有限的。我不知道如何在 JS 中访问已解析的 CSS。我检查了 CSS，他们在分离样式方面做得很好，但是没有一种访问属性的好方法 {"parsedCssText": "h1 { margin-top: var(m...pright: var(myMargin);}" }
jquery css 解析器可能有点棘手。 jquery 无法工作，因为我们的平台没有 HTML 和 CSS。
@JONYC: var parser = new CSSParser(); var sheet = parser.parse('body { color:black; }', false, true); sheet.cssRules[0].declarations[0].property; // statement returns 'color' 见this JSFiddle。
很高兴它为您服务。我猜 Josh3736 值得为此加分！
我找不到使用 JCSSP 将 JSON 对象解析回 CSS 的方法。 JCSSP 很好地将 CSS 解析为 JSON，它使用的结构正是我们所需要的，但我们还需要一种将 JSON 对象解析回 CSS 的方法。有什么想法/建议吗？

【解决方案2】：

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

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);

【讨论】：

【解决方案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("'");
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;
}
}

【讨论】：