用 .(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'],

 .def>#xyz, .def>div#xyz, .def>#xyz,

 .def>div#xyz[id=*]

{

    color:#ee2ee2;

}

@media (min-width: 30em) and (orientation: landscape) 

{

  .abc{

      background-color :#FFFFFF;

      border-color:1px solid #eee ;

  }

  .def>#xyz, .def #xyz, .def>#xyz{border-color:1px solid #ddd;}

  .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上测试这个实现。