用 .(Class) 替换 CSS "#" (ID)

Question

我有一个像这样的 CSS 字符串

    #xyz{

          color:#ee2ee2;

      }

     .abc{

        background-color:#FFFFFF;

        border-color:1px solid #eee;

     }

    .def #xyz{

       border-color:1px solid #ddd;

    }

我需要在不更改（或任何其他颜色选择器）的情况下替换#xyz（或任何其他 ID 选择器）。基本的java脚本代码就可以了.xyzcolor: #ee2ee2

我尝试了一些正则表达式，但在一些情况下失败了

cssText.replace(/#([a-zA-Z])/gm, '.$1');

Answer 1

这将取代#使用.时，才会有一个{在同一行之后的某个地方。cssText = `  #xyz  {     color:#ee2ee2;  }  .abc{     background-color:#FFFFFF;     border-color:1px solid #eee;  }  .def #xyz{     border-color:1px solid #ddd;  }  body{background-color:#fff000;}.ig26{padding:20px;}.icts{width:200px;height:200px;padding:10px;} `;console.log(cssText.replace(/#([a-zA-Z])(?=[^}]*{)/g, '.$1'));

Answer 2

这对正则表达式来说不是一个好工作。通过使用合适的 CSS 解析器，您将获得更可靠的结果。例如：const css = require('css');const ast = css.parse(myInputString);ast.stylesheet.rules.forEach(rule => {  if (rule.type === 'rule') {    rule.selectors = rule.selectors.map(selector => selector.replace('#', '.'))  }});return css.stringify(ast);（注意：我还没有完全测试这段代码。但原理是可靠的。

Answer 3

我的建议是使用一个可以将对象解析为规则的库，正如@Jakub 所建议的那样。此答案使用以下正则表达式 ，/#(?!:[\w]+)(?=([\w\d\[\]\,\*\=\>\.\s]*[\{\,\[]+))/g它应该有效匹配，#因为它继续进行未捕获的组（代表 Id 本身），然后继续进行正向前瞻组（作为一系列单词 ( a-zA-Z0-9_) 和特殊字符，包括空格和换行符） , , {, ,, [)。var outputElm = document.getElementById("output");var importedCode = `div#xyz, #xyz, div#xyz[id='xyz'],&nbsp;.def>#xyz, .def>div#xyz, .def>#xyz,&nbsp;.def>div#xyz[id=*]{&nbsp; &nbsp; color:#ee2ee2;}@media (min-width: 30em) and (orientation: landscape)&nbsp;{&nbsp; .abc{&nbsp; &nbsp; &nbsp; background-color :#FFFFFF;&nbsp; &nbsp; &nbsp; border-color:1px solid #eee ;&nbsp; }&nbsp; .def>#xyz, .def #xyz, .def>#xyz{border-color:1px solid #ddd;}&nbsp; .def>#xyz>div, .def #xyz div, .def>#xyz>div.abc {border-color:1px solid #ddd;}}`;var replaceIdRegex = /#(?!:[\w]+)(?=([\w\d\[\]\,\*\=\>\.\s]*[\{\,\[]+))/g;outputElm.innerText = importedCode.replace(replaceIdRegex, ".");<p id="output"></p>我已经对此进行了相当多的测试，但我不能说它不脆弱或可以解释所有情况。您也可以在regex101 playground上测试这个实现。