Javascript正则表达式解析CSS

Question

我有像

这样的CSS代码段

.is-error{
  color: #d8000c;
}
.is-success{
  color: #4f8a10;
}

我想用javascript中的正则表达式解析它，这样我就得到一个带有类名和相应属性的数组。

正则表达式我写道：/^(?:([\w.\-\>\~\_\s\^\'\"\=\#\*\[\]\:\,\+]+)\{(.*)\})$/

给我输出：

array[1] = .is-error
array[2] = color: #d8000c;}.is-success{color: #4f8a10

期望的输出：

array[1] = .is-error
array[2] = color: #d8000c;
array[3] = .is-success
array[4] = color: #d8000c;

Answer 1

请勿使用复杂的正则表达式匹配。但是，使用较不复杂的 split 。

对于拆分，我们可以使用String.split并将正则表达式/[{}/传递给它，然后我们使用Array.map修剪字符串，以便只获取内容并删除空格。但在此之前，我们将使用Array.filter

删除不需要的空字符串

var arr = str.split(/[{}]/).filter(String).map(function(str){
    return str.trim(); 
});

如果CSS是有效的，它还具有处理所有css规则而不仅仅是类的优势。