Javascript 替换CSS“#&引用；（ID）带有（类别）

我有一个CSS字符串，比如

#xyz{
颜色：#ee2ee2；
}
.美国广播公司{
背景色：#FFFFFF；
边框颜色：1px纯色#eee；
}
.def#xyz{
边框颜色：1px纯色#ddd；
}

我需要将

#xyz

（或任何其他ID选择器）替换为

.xyz

，而无需更改

颜色：#ee2ee2

（或任何其他颜色选择器）。 基本的java脚本代码就可以了

我试过一些正则表达式，但有几次失败了

cssText.replace（/#（[a-zA-Z]）/gm，.$1'）；

通过匹配行首的空格，您可以使用regex

^\s+#（\w+）

Java 13中的示例：

var regex = "^\\s+#(\\w+)";
var string = """
        #xyz{
              color:#ee2ee2;
          }
         .abc{
            background-color:#FFFFFF;
            border-color:1px solid #eee;
         }
        .def #xyz{
           border-color:1px solid #ddd;
        }
    """;

var matcher = Pattern.compile(regex, Pattern.MULTILINE).matcher(string);
var newString = matcher.replaceAll(".$1");

只有在同一行后面某处有一个

{

时，才会将

#

替换为

cssText=`
#xyz
{
颜色：#ee2ee2；
}
.美国广播公司{
背景色：#FFFFFF；
边框颜色：1px纯色#eee；
}
.def#xyz{
边框颜色：1px纯色#ddd；
}
正文{背景色：#fff000；}.ig26{填充：20px；}.icts{宽度：200px；高度：200px；填充：10px；}
`;
console.log（cssText.replace（/#（[a-zA-Z]）（？=[^}]*{）/g，'.$1'）；

这对于正则表达式来说不是一个好工作。通过使用适当的CSS解析器，您将获得更可靠的结果。例如：

constcss=require（'css'）；
const ast=css.parse（myInputString）；
ast.stylesheet.rules.forEach（规则=>{
如果（rule.type==='rule'）{
rule.selectors=rule.selectors.map（selector=>selector.replace（'#'，'.'））
}
});
返回css.stringify（ast）；

---

（注意：我还没有完全测试过这段代码。但原则是可靠的。

我的建议是使用一个库，可以将对象解析为规则，正如@Jakub所建议的那样

---

这个答案使用以下正则表达式，

/（？！：[\w]+）（？=（[\w\d\[\]\，\*\=\>\.\s]*[\{\，\[]+）/g

，它应该有效地匹配

，因为它继续执行未捕获的组（表示Id本身），而该组又继续执行正向前瞻组（作为一系列单词（

a-zA-Z0-9

）和特殊字符，包括空格和换行符，这些字符进行

{

，

，

，

[

）

var outputElm=document.getElementById（“输出”）；
var importedCode=`div#xyz，#xyz，div#xyz[id='xyz']，
.def>#xyz、.def>div#xyz、.def>#xyz、，
.def>div#xyz[id=*]
{
颜色：#ee2ee2；
}
@介质（最小宽度：30em）和（方向：横向）
{
.美国广播公司{
背景色：#FFFFFF；
边框颜色：1px纯色#eee；
}
.def>#xyz、.def#xyz、.def>#xyz{边框颜色：1px实心#ddd；}
.def>#xyz>div、.def#xyz div、.def>#xyz>div.abc{边框颜色：1px实心#ddd；}
}`;
var replaceIdRegex=/#（？！：[\w]+）（？=（[\w\d\[\]\，\*\=\>\.\s]*[\{\，\[]+）/g；
outputElm.innerText=importedCode.replace（replaceIdRegex，“.”；

为什么不能将

.xyz

添加到CSS中？我有一个UI生成器，用户可以在其中导入代码并从导入的代码中创建多个组件。由于HTML不支持多个ID，我需要将它们替换为classUI生成器…如所见即所得（WYSIWYG）？我想这就是为什么要通过客户端编程实现这一点的原因脚本，但它似乎更像是一个声明性或事件驱动的场景，而不是对某些其他活动的后期处理。您可能希望查看此实现代码。话虽如此，有条件地将类添加到元素的此场景应该是次要的。您真的需要正则表达式，还是仅是您正在参与的一个实现N订购这个？是的，它是一个WYSIWYG生成器（大部分），而regex只是我正在考虑的一个解决方案。任何其他方法都会很好。仅供参考，一旦我替换了CSS，我将使用SCS对其进行沙箱处理。实际上，我没有注意到您关于导入代码的评论。在这种情况下，您将验证导入的代码并将其作为字符串进行处理？您是否使用库或包来处理此问题上传的数据？特别是将上传的数据解析为更好地支持XSLT和Xpath的XML DOM对象的东西在这里会很好。感谢您的尝试，尽管在一些情况下失败了，例如存在@media查询或css沙盒。在这种情况下，您应该更新您的问题示例以包含

 @media

查询以确定没有解释它的答案。请注意，

#foo\n{

是完全有效的css。正如

body{color:#ddd；}foo{

（注意没有新行。正如@JakubHampl所建议的那样，

body{background color:.fff000；}.ig26{padding:20px；}.icts{width:200px；height:200px；padding:10px；}

yeah..这基本上是正确的..我确实认为它比我提供的表达式更脆弱。你能建议解析吗？在我的答案中引用了这个答案的原则作为建议。因为这个答案基本上包含对象和类型（并且不太具体地使用哪个库），我认为值得注意的是CSSOM构造函数草案\将CSS文档和对象映射的构造标准化为一组API规范。如果我能将2个答案标记为正确，我也会将这一个标记为正确。