Question

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

[

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

, 

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

]

我想把它变成：

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

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

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

我试图通过大量的拆分声明来完成这项工作，但我很幸运。

Answer 1

看到这个小提琴：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"

Answer 2

不幸的是，解析CSS令牌并不像拆分字符串那么简单，事实上，理想情况下你需要一个解析器，我建议你为你的任务使用现有的CSS解析器：

Answer 3

no-RegExp方法

var cssObj = {},
    arr = [".divd { bottom: 0px; height: 500px; }", ".divk { font-size: 14px; }"],
    arr_i = arr.length,
    i, j, k, str,
    sel, vals, val;
while(arr_i-- > 0){       // loop over array
    str = arr[arr_i];
    i = str.indexOf('{');
    sel = str.slice(0,i); // get Selector
    vals = str.slice(i+1,str.lastIndexOf('}'));           // get values
    val = vals.slice(0,vals.lastIndexOf(';')).split(';'); // and put in array
    cssObj[sel] = {};
    k = val.length;
    while(k-- > 0){
        j = val[k].indexOf(':');                      // get name-value pair
        cssObj[sel][val[k].slice(0,j).trim()] = val[k].slice(j+1).trim();
    }
}
console.log(cssObj); // see output

用作功能，传递arr并将console.log更改为return。 .slice(0,vals.lastIndexOf(';'))假设您使用分号结束}之前的最后一个条目。如果您不想假设这一点，请将其取出并检查最后一个数组项是否为空/空格。

jsperf vs RegExp method

Answer 4

我过去曾经使用过这个，但只有当我确切地知道我将要发送到正则表达式时 - 主要是因为我确信会有语法可以打破它（特别是像mixins这样的，css动画，css变量和媒体查询）。出于这些原因，您可能应该遵循马里奥的回答。

然而，它已经处理了我自己的大部分css文件，并且可能会帮助其他人...它不适合使用像您正在使用的数组结构，但是这很容易改变。很明显，你可以通过摆脱RegExp并使用indexOf作为shhac已经完成来优化事物，但我发现RegExp的表现力更容易使用，并且当你需要时更容易扩展

一些注意事项

假设CSS中没有评论 - 您可以随时添加替换以删除评论。
它依赖于JSON.parse方法可用 - 您可以始终包含非JSON回退。

带注释的代码：

window.onload = function(){
  /// this is designed to find a <style> element in the page with id="css"
  var entireStylesheetString = document.getElementById('css').innerHTML;
  var css = String('{'+entireStylesheetString+'}')
    /// convert double quotes to single to avoid having to escape
    .replace(/"/gi,"'")
    /// replace all whitespace sequences with single space
    .replace(/\s+/g,' ')
    /// sort the first open brace so things are neat
    .replace(/^{/,'{\n')
    /// sort the newlines so each declaration is on own line
    .replace(/\}/g,'}\n')
    /// find the selectors and wrap them with quotes for JSON keys
    .replace(/\n\s*([^\{]+)\s+?\{/g,'\n"$1":{')
    /// find an attribute and wrap again with JSON key quotes
    .replace(/([\{;])\s*([^:"\s]+)\s*:/g,'$1"$2":')
    /// find values and wrap with JSON value quotes
    .replace(/":\s*([^\}\{;]+)\s*(;|(\}))/g,'":"$1",$3')
    /// add commas after each JSON object
    .replace(/\}/g,'},')
    /// make sure we don't have too many commas
    .replace(/,\s*\}/g,'}');
  /// remove the final end comma
  css = css.substring(0,css.length-2);
  try{
    /// parse using JSON
    console.log(JSON.parse(css));
  }catch(ee){
    console.log(ee);
  }
};

代码寂寞：

window.onload = function(){
  var entireStylesheetString = document.getElementById('css').innerHTML;
  var css = String('{'+entireStylesheetString+'}')
    .replace(/"/gi,"'")
    .replace(/\s+/g,' ')
    .replace(/^{/,'{\n')
    .replace(/\}/g,'}\n')
    .replace(/\n\s*([^\{]+)\s+?\{/g,'\n"$1":{')
    .replace(/([\{;])\s*([^:"\s]+)\s*:/g,'$1"$2":')
    .replace(/":\s*([^\}\{;]+)\s*(;|(\}))/g,'":"$1",$3')
    .replace(/\}/g,'},')
    .replace(/,\s*\}/g,'}');
  css = css.substring(0,css.length-2);
  try{console.log(JSON.parse(css));}catch(ee){console.log(ee);}
};

Answer 5

我不是eval的支持者，但如果你转换

。至[“

第一个空格到“] =

：to：“

到“，

然后eval将设置整个事物

Answer 6

您可以简单地附加样式标记;

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

var $style=$('<style>');

$.each( data, function(i, item){
  $style.append( item + ';');
})

$('head').append($style)

如何将css字符串转换为数组

6 个答案: