嘗試使用js代碼

Question

我有不好的CSS文件，像這樣的規則（我無法控制這些文件的生成），清理錯誤的CSS規則：

.class html { 
} 

.class2 html,.class3 html { 

} 

html { 

} 

html .class4 { 

} 

.class body { 
} 

.class2 body,.class3 body {  
} 

body {  
} 

body .class4 {  
} 

，你可以看到，一些HTML和BODY規則在類名後放。

我想要做的是扭轉這個規則，以獲得適當的限定符（標籤然後類）。

我預期的結果是：

html .class { 
} 

html .class2 ,html .class3 { 

} 

html { 

} 

html .class4 { 

} 

body .class { 
} 

body .class2 ,body .class3 { 

} 

body { 

} 

body .class4 { 

} 

我試圖用一個正則表達式：([^,]+\s+)(html|body)這個換人：$2 $1，但我沒有得到我想要的東西。 （Repro on regex101）

如何達到我的目標？

PS：這將以自定義吞嚥任務結束，因此需要js正則表達式解決方案。

Answer 1

您可以使用

(\.\S+)(\s+)(html|body) 

與$3$2$1取代。

正則表達式演示是here。

表達細節：

• (\.\S+) - 字面點，接着與一個或多個非空白字符（第1組）
• (\s+) - 的一個或多個空格（組2）
• (html|body) - 或者html或body文字字符序列（組3）。

替換模式包含反向交換髮生的組反向引用。

爲了考慮像.class .classN html案件，使用

/(\.\S+(?:\s+\.\S+)*)(\s+)(html|body)/g 

其中非捕獲組(?:\s+\.\S+)*與*（（零次或多次量化）。