尝试使用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+)*与*（（零次或多次量化）。