如何将CSS字符串转换为数组 [英] how to convert css string into array

问题描述

这就是我想要做的. 我想转换一个包含CSS规则的数组，如下所示:

Well here is what I'm trying to do. I want to convert a array which contains CSS rules like so:

[

".divd { bottom: 0px; height: 500px; }"

, 

".divk { font-size: 14px; }"

]

我想把它变成:

cssarray['divd'] =  {
        bottom: "0px",
        height: "500px",
    };

这是我到目前为止所做的:

Here is what i've done so far:

    var splitSelector= css.split("{");
    var splitProperty = split[1].split(";");
    var v =[];
    for(i in splitProperty ){
        v = $.extend(v,splitProperty[i].split(":"));
    }

我试图用很多split语句来完成这项工作，但是我很不幸.

I have tried to get this work with lot's of split statements but im out of luck.

推荐答案

查看此小提琴: http://jsfiddle .net/YrQ7B/3/

    var arr = [".divd { bottom: 0px; height: 500px; }", 
"#divk { font-size: 14px; }"];

var output = {};
for(var k in arr)
{
    var value = arr[k], key;
    // Get key
    value.replace(/(\.|#)([a-z\s]+){/gi, function($1, $2, $3){
          key = $3;
    });
    // Make object
    output[key] = {};

    // Replace First part
    value = value.replace(/\.([a-z\s]+) {/gi, "");
    value = value.replace("}", "");

    value.replace(/([a-z\-]+)([^:]+)?:([^0-9a-z]+)?([^;]+)/g, function($1, $2, $3, $4, $5){             
        output[key][$2] = $5;
    });
}

console.log(output);
​
​

日志:

Object
    divd: Object
        bottom: "0px"
        height: "500px"
    divk: Object
        font-size: "14px"

这篇关于如何将CSS字符串转换为数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！