一尘不染

在JavaScript / jQuery中解析CSS

javascript

我正在尝试在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,"");
}

谢谢!


阅读 324

收藏
2020-05-01

共1个答案

一尘不染

有一个用Javascript编写的CSS解析器,称为JSCSSP

2020-05-01