CSS 到 JSON 解析器或转换器

Posted 2023-02-22

【中文标题】CSS 到 JSON 解析器或转换器

【英文标题】：CSS to JSON Parser or Converter

【发布时间】：2011-07-11 13:52:56

【问题描述】：

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

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

我该怎么做？

【问题讨论】：

你将如何用 JSON 表示你的 CSS 样式表？

这是问题的一部分。我愿意接受建议。它不必是严格的 JSON...只是样式的 JS 表示会很好。

参见此处：lesscss.org ... 可能会有所帮助。

【参考方案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;