使用JavaScript正则替换为样式表所有CSS选择器添加父类.template-container

问题原因 #

你原有正则(.*)(,|{)使用了贪婪匹配，会从行首一次性匹配到最后一个逗号/左大括号，多个逗号分隔的并列选择器会被识别为单一匹配项，因此只能在最开头插入父类。

最优正则方案 #

匹配规则（需开启全局匹配模式） #

(?!@)([^\s,][^{,]+)(?=\s*(?:,|{))

规则说明：

• (?!@)：负向预查，跳过@media、@keyframes等CSS at规则，避免错误添加父类
• ([^\s,][^{,]+)：匹配单个独立选择器，排除开头的空白、逗号，同时不会匹配到后续的样式规则内容
• (?=\s*(?:,|{))：正向预查，确认当前匹配项后续为可选空白加逗号/左大括号，保证匹配的是合法选择器

替换规则 #

.template-container $1

可选优化（多选择器自动换行） #

如果需要让逗号分隔的多个选择器每个单独占一行，可以在上述替换完成后，新增一步替换：

• 匹配规则：,\s*
• 替换规则：,\n.template-container

效果验证 #

按上述规则处理后，即可得到你期望的转换效果，所有单个选择器都会被正确添加.template-container父类，并列选择器也不会遗漏。

内容的提问来源于stack exchange，提问作者Timbo773