将CSS文本转换为JavaScript对象

我将以下文本作为JavaScript字符串

.myBox {
 display: block; 
 width: 20px; 
 height: 20px;
 background-color: rgb(204,204,204);
 }

我想转换为JavaScript对象

var myBox = {
 'display': 'block','width': '20px','height': '20px';
 'background-color': 'rgb(204,204)';
};

任何想法或已经制作的脚本？

解决方法

这是解析器的开始,可以做你想要的.当然它需要工作,特别是如果你想处理可能提供的任何通用CSS.这假设输入css是按照您提供的方式编写的,第一行是属性的名称,最后一行是’}’,依此类推.

如果您不想只处理基本属性,编写复杂的解析器并不是一件容易的事.例如,如果您声明如下内容,该怎么办？

input[type="text"],table > tr:nth-child(2),#link a:hover {
    -webkit-transition: width 2s; /* Safari and Chrome */
}

这是有效的CSS,但是如何从中提取有效的javascript变量名？如何将-webkit-transition转换为有意义的属性名称？整个任务闻起来像是你做错了.我没有在解析器上工作,而是在处理更稳定的解决方案.

顺便说一句,这是您可以从以下开始的代码：

var s = '.myBox {\n';
    s += 'display: block;\n';
    s += 'width: 20px;\n';
    s += 'height: 20px;\n';
    s += 'background-color: rgb(204,204);\n';
    s += '}\n';

    // split css by line
    var css_rows = s.split('\n'); 

    // filter out empty elements and strip ';'      
    css_rows = css_rows.filter(function(x){ return x != '' }).map(function(x){ return x.trim().replace(';','') });

    // create object
    var json_name = css_rows[0].trim().replace(/[\.\{\ \#]/g,'');
    eval('var ' + json_name + ' = {};');
    // remove first and last element
    css_rows = css_rows.splice(1,css_rows.length-2)

    for (elem in css_rows)
    {
        var elem_parts = css_rows[elem].split(':');
        var property_name = elem_parts[0].trim().replace('-','');
        var property_value = elem_parts[1].trim();
        eval(json_name + '.' + property_name + ' = "' + property_value + '";');
    }

将CSS文本转换为JavaScript对象

解决方法

相关文章