javascript - 尝试使用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，但我不明白我想要的是。 (Repro on regex101)

如何实现我的目标？

PS:这将以自定义 gulp 任务结束，因此需要 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+)* 使用 * 进行量化((零次或多次)。