我正在尝试在JavaScript中实现CSS的解析,以便:
a { color: red; }
被解析为对象:
{ 'a' { 'color': 'red' } }
首先,有没有可以使用的JavaScript / jQuery 库 ?
我的实现是非常基本的,因此我确信它绝对不是万无一失的。例如,它对于基本CSS可以正常工作,但对于以下类型的属性可以正常工作:
background: url(data:image/png;base64, ....);
失败是因为我split(';')要分开property:value成对使用。在这里,;发生在中value,因此它也会在该点分裂。
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,""); }
谢谢!
有一个用Javascript编写的CSS解析器,称为JSCSSP