解析 CSS 的 Javascript 正则表达式

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

不要尝试用复杂的正则表达式匹配它。但是，拆分 使用一个不太复杂的。

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

删除不需要的空字符串

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

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