我正在尝试在 JavaScript 中实现 CSS 的解析,以便:
a {
color: red;
}
被解析为对象:
{
'a' {
'color': 'red'
}
}
首先,我可以使用JavaScript / jQuery库吗?
我的实现非常基础,所以我确信它无论如何都不是万无一失的。例如,它适用于基本 CSS,但适用于以下类型的属性:
background: url(data:image/png;base64, ....);
它失败了,因为我正在使用split(';')
分隔property:value
对。在这里,;
发生在 中value
,所以它也在那个点分裂。
有没有其他方法可以做到这一点?
这是代码:
parseCSS: function(css) {
var rules = {};
css = this.removeComments(css);
var blocks = css.split('}');
blocks.pop();
var len = blocks.length;
for (var i = 0; i < len; i++)
{
var pair = blocks[i].split('{');
rules[$.trim(pair[0])] = this.parseCSSBlock(pair[1]);
}
return rules;
},
parseCSSBlock: function(css) {
var rule = {};
var declarations = css.split(';');
declarations.pop();
var len = declarations.length;
for (var i = 0; i < len; i++)
{
var loc = declarations[i].indexOf(':');
var property = $.trim(declarations[i].substring(0, loc));
var value = $.trim(declarations[i].substring(loc + 1));
if (property != "" && value != "")
rule[property] = value;
}
return rule;
},
removeComments: function(css) {
return css.replace(/\/\*(\r|\n|.)*\*\//g,"");
}
谢谢!