/**
* 将CSS形式的字符串转换为JSON
*
* @param {css字符串} css
*/
function css2json(css) {
// 移除CSS所有注释
while ((open = css.indexOf("/*")) !== -1 &&
(close = css.indexOf("*/")) !== -1) {
css = css.substring(0, open) + css.substring(close + 2);
}
// 初始化返回值
let json = {};
while (css.length > 0) {
// 存储第一个左/右花括号的下标
const lbracket = css.indexOf('{');
const rbracket = css.indexOf('}');
// 第一步:将声明转换为Object,如:
// `font: 'Times New Roman' 1em; color: #ff0000; margin-top: 1em;`
// ==>
// `{"font": "'Times New Roman' 1em", "color": "#ff0000", "margin-top": "1em"}`
// 辅助方法:将array转为object
function toObject(array) {
let ret = {};
array.forEach(e => {
const index = e.indexOf(':');
const property = e.substring(0, index).trim();
const value = e.substring(index + 1).trim();
ret[property] = value;
});
return ret;
}
// 切割声明块并移除空白符,然后放入数组中
let declarations = css.substring(lbracket + 1, rbracket)
.split(";")
.map(e => e.trim())
.filter(e => e.length > 0); // 移除所有""空值
// 转为Object对象
declarations = toObject(declarations);
// 第二步:选择器处理,每个选择器会与它对应的声明相关联,如:
// `h1, p#bar {color: red}`
// ==>
// {"h1": {color: red}, "p#bar": {color: red}}
let selectors = css.substring(0, lbracket)
// 以,切割,并移除空格:`"h1, p#bar, span.foo"` => ["h1", "p#bar", "span.foo"]
.split(",")
.map(selector => selector.trim());
// 迭代赋值
selectors.forEach(selector => {
// 若不存在,则先初始化
if (!json[selector]) json[selector] = {};
// 赋值到JSON
Object.keys(declarations).forEach(key => {
json[selector][key] = declarations[key];
});
});
// 继续下个声明块
css = css.slice(rbracket + 1).trim();
}
// 返回JSON形式的结果串
return json;
}
/**
* 将json对象转换为css
*
* @param {json对象} json
*/
function json2css(json) {
return JSON.
stringify(json,4).
slice(1, JSON.stringify(json).length - 1).
replace(new RegExp(',', 'gm'), ' ').
replace(new RegExp('"', 'gm'), '').
replace(/:{/ig, "{")
}
JSON对象与CSS转换
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 一.Json对象与Json字符串的转化 1.jQuery插件支持的转换方式: $.parseJSON( jsons...
- 基本的转换为:JSON.parse与JSON.stringify。 但是json数据中含function,则转换后...
- 1>jQuery插件支持的转换方式: 代码如下: $.parseJSON( jsonstr ); //jQuery...
- json字符串:var str = '{'a':1, 'b':2}'; json对象:var obj = {'a'...