Javascript正則表達式解析CSS

Question

我有CSS片段之類的

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

我想用javascript中的正則表達式解析它，這樣我就得到一個帶有類名和相應屬性的數組。

正則表達式我寫道：/ /^(?:([\\w.\\-\\>\\~\\_\\s\\^\\'\\"\\=\\#\\*\\[\\]\\:\\,\\+]+)\\{(.*)\\})$/ (?:([ /^(?:([\\w.\\-\\>\\~\\_\\s\\^\\'\\"\\=\\#\\*\\[\\]\\:\\,\\+]+)\\{(.*)\\})$/ ： /^(?:([\\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並將regex /[{}/傳遞給它，然后我們使用Array.map修剪字符串，以便只獲取內容並刪除空格。 但在此之前，我們將使用Array.filter刪除不需要的空字符串

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

它還具有處理所有css規則而不僅僅是類的優點，前提是CSS是有效的。