javascript CSS 到 JSON 解析器或转换器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5240778/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to JSON Parser or Converter
提问by jonycheung
I'm working on a non-web platform with no HTML or CSS layer, just a pure JavaScript implementation.
我在一个没有 HTML 或 CSS 层的非网络平台上工作，只是一个纯 JavaScript 实现。
I would like to load a CSS file as a text string using AJAX, parse the CSS into a JS objects or JSON, and then use utility library to interpret what styles should be applied to an element in the DOM tree.
我想使用 AJAX 将 CSS 文件作为文本字符串加载，将 CSS 解析为 JS 对象或 JSON，然后使用实用程序库来解释应将哪些样式应用于 DOM 树中的元素。
How would I do that?
我该怎么做？
回答by laher
I think you're looking for a "JavaScript CSS parser".
我认为您正在寻找“JavaScript CSS 解析器”。
Have you looked at either of these?
你看过这些吗？
http://www.glazman.org/JSCSSP/
http://www.glazman.org/JSCSSP/
or
或者
http://bililite.com/blog/2009/01/16/jquery-css-parser/
http://bililite.com/blog/2009/01/16/jquery-css-parser/
The first one looks like a good fit, but if you like jQuery then maybe you'd prefer the second one.
第一个看起来很合适，但是如果您喜欢 jQuery，那么也许您更喜欢第二个。
HTH
HTH
回答by Aram Kocharyan
I looked at both the links @amir75 suggested. The first looked best, but the code was far too long for what I was doing. I decided to put a lightweight script together. It doesn't use jQuery, but you can if you want to load a CSS file using .get()etc. Take a look at the example.html and the js console output to get a look at the structure. You can choose to keep the order of the elements if you're using comments in the CSS, or otherwise it will still keep the order of the elements but not those of the comments while using a simpler JSON structure.
我查看了@amir75 建议的两个链接。第一个看起来最好，但代码对于我正在做的事情来说太长了。我决定把一个轻量级的脚本放在一起。它不使用 jQuery，但如果您想使用.get()等加载 CSS 文件，则可以使用。查看 example.html 和 js 控制台输出以了解结构。如果您在 CSS 中使用注释，您可以选择保持元素的顺序，否则在使用更简单的 JSON 结构时，它仍将保持元素的顺序而不是注释的顺序。
https://github.com/aramkocharyan/CSSJSON
https://github.com/aramkocharyan/CSSJSON
Usage:
用法：
// 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);
回答by Devashish Priyadarshi
Try the below code "without" any external library:
试试下面的代码“没有”任何外部库：
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;
}
}
