用于解析 CSS 的 Javascript 正则表达式答案

【问题标题】：Javascript Regular Expression to Parse CSS用于解析 CSS 的 Javascript 正则表达式
【发布时间】：2015-05-30 04:18:33
【问题描述】：

我有 CSS sn-p 之类的

.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;

【问题讨论】：

你能展示一下你是如何存储字符串的吗？
已经有库可以做到这一点；你的用例是什么？如果您是正则表达式的初学者并且还不是 CSS 专家，那么解析任意规则并不容易。您还需要避免使用“一个正则表达式来统治它们”；而是将解析拆分为不同的子任务。
@beerbajay 我能够通过阿米特提供的解决方案实现我想要的。我正在尝试解析 CSS。我想知道 CSS 解析库实际上是如何工作的。

【解决方案1】：

不要尝试将其与复杂的正则表达式匹配。但是，split 使用了一种不太复杂的方法。

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

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

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

【讨论】：

@JunaidHamza 很高兴它帮助了你:)
能否请您指导我，如果在我的 CSS 文件中我有多行 cmets，那么我该如何解决这种情况。我可以选择 2 个选项，1) 将所有 cmets 保留在同一个地方。 2) 从 CSS 中删除所有 cmets 对于这两者，选择如何使其工作