尝试使用js代码清理错误的CSS规则

Question

我的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 ，但是我没有得到想要的东西。 （ regex101上的Repro ）

如何达到我的目标？

PS：这将以自定义gulp任务结束，因此需要js regex解决方案。

Answer 1

您可以使用

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

并替换为$3$2$1 。

正则表达式演示在这里 。

表达式细节 ：

• (\\.\\S+) -文字点后跟一个或多个非空白（组1）
• (\\s+) -一个或多个空格（第2组）
• (html|body) html或body文字字符序列（第3组）。

替换模式包含组反向引用，该组反向引用遵循相反的方向进行交换。

要说明类似.class .classN html ，请使用

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

非捕获组(?:\\s+\\.\\S+)*用*量化（（零次或多次）。