Question

我有一个丑陋的css声明块。

ol{margin:0;padding:0}p{margin:0}.c5{width:468.0pt;background-color:#ffffff;padding:72.0pt 72.0pt 72.0pt 72.0pt}.c4{font-size:24pt;font-weight:bold}.c3{margin:0;padding:0}.c0{direction:ltr}.c1{height:11pt}.c2{font-style:italic}body{color:#000000;font-size:11pt;font-family:Arial}h1{padding-top:24.0pt;color:#000000;font-size:24pt;font-family:Arial;font-weight:bold;padding-bottom:6.0pt}h2{padding-top:18.0pt;color:#000000;font-size:18pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h3{padding-top:14.0pt;color:#000000;font-size:14pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h4{padding-top:12.0pt;color:#000000;font-size:12pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h5{padding-top:11.0pt;color:#000000;font-size:11pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h6{padding-top:10.0pt;color:#000000;font-size:10pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}

客户端，我希望将其视为一个字符串并将其转换为数组，并将每个声明（例如aaa {bbb: ccc; ddd: eee}）作为数组的元素，因此结果如下所示

["ol{margin:0;padding:0}","p{margin:0}",...]

如何使用Javascript执行此操作？（jQuery很好）

Answer 1

var css='ol{margin:0;padding:0}p{margin:0}.c5{width:468.0pt;background-color:#ffffff;padding:72.0pt 72.0pt 72.0pt 72.0pt}.c4{font-size:24pt;font-weight:bold}.c3{margin:0;padding:0}.c0{direction:ltr}.c1{height:11pt}.c2{font-style:italic}body{color:#000000;font-size:11pt;font-family:Arial}h1{padding-top:24.0pt;color:#000000;font-size:24pt;font-family:Arial;font-weight:bold;padding-bottom:6.0pt}h2{padding-top:18.0pt;color:#000000;font-size:18pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h3{padding-top:14.0pt;color:#000000;font-size:14pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h4{padding-top:12.0pt;color:#000000;font-size:12pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h5{padding-top:11.0pt;color:#000000;font-size:11pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h6{padding-top:10.0pt;color:#000000;font-size:10pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}';

var split=css.split('}');
for(i=0;i<split.length;i++){
  split[i]+='}';
}

或者，甚至更好：

css=css.replace(/}/g,'}~');
var cssArray=css.split('~');

Answer 2

这可以解决这个问题吗？

function split_css(s){
    return s.split("}")
            .filter(function(s){return !!s;}) // discard empty strings
            .map(function(s){return s+"}";    // restore the }
});

Answer 3

正则表达式！

var css='ol{margin:0;padding:0}p{margin:0}.c5{width:468.0pt;background-color:#ffffff;padding:72.0pt 72.0pt 72.0pt 72.0pt}.c4{font-size:24pt;font-weight:bold}.c3{margin:0;padding:0}.c0{direction:ltr}.c1{height:11pt}.c2{font-style:italic}body{color:#000000;font-size:11pt;font-family:Arial}h1{padding-top:24.0pt;color:#000000;font-size:24pt;font-family:Arial;font-weight:bold;padding-bottom:6.0pt}h2{padding-top:18.0pt;color:#000000;font-size:18pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h3{padding-top:14.0pt;color:#000000;font-size:14pt;font-family:Arial;font-weight:bold;padding-bottom:4.0pt}h4{padding-top:12.0pt;color:#000000;font-size:12pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h5{padding-top:11.0pt;color:#000000;font-size:11pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}h6{padding-top:10.0pt;color:#000000;font-size:10pt;font-family:Arial;font-weight:bold;padding-bottom:2.0pt}';
var re = new RegExp("([^{]+)\s*\{\s*([^}]+)\s*}", "g");
var result = css.match(re);
// result[0] => ol{margin:0;padding:0}

解析一串CSS声明并将其转换为数组

3 个答案: