0

那么这就是我想要做的。我想转换一个包含 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(":"));
    }

我试图用很多拆分语句来完成这项工作，但我不走运。

4

6 回答 6

4

看到这个小提琴：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"
于 2012-10-13T12:09:12.890 回答
2

不幸的是，解析 CSS 标记并不像拆分字符串那么容易，事实上，理想情况下，您需要一个解析器，我建议您使用现有的 CSS 解析器来完成您的任务：

于 2012-10-13T12:12:38.207 回答
1

无正则表达式方法

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 与 RegExp 方法

于 2012-10-13T12:19:13.557 回答
1

我过去使用过它，但只有当我确切知道我将发送到正则表达式中的内容时——主要是因为我确信那里会有可能破坏它的语法（尤其是使用 mixins、css 动画之类的） 、css 变量和媒体查询）。正是出于这些原因，您可能应该遵循马里奥的回答。

但是，它已经处理了我自己扔给它的大多数 css 文件，并且可能会帮助其他人......虽然它不是为使用像您正在使用的数组结构而量身定制的，但这可能是很容易改变。显然，您可以通过摆脱RegExp并indexOf像 shhac 所做的那样使用来优化事物，但我发现 RegExp 的表现力更容易使用，并且在需要时更容易扩展。

几点注意事项

  1. 它假定 CSS 中没有注释- 您始终可以添加替换以去除注释。
  2. 它依赖于可用的 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);}
};
于 2012-10-13T13:59:08.353 回答
0

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

. 到 [”

第一个空格 "]=

： 到 ：”

; 到 ”，

然后一个 eval 将设置整个事情

于 2012-10-13T12:10:06.600 回答
0

您也许可以简单地附加一个样式标签；

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)
于 2012-10-13T14:49:30.813 回答