Question

我有一个CSS字符串，例如

    #xyz{
          color:#ee2ee2;
      }
     .abc{
        background-color:#FFFFFF;
        border-color:1px solid #eee;
     }
    .def #xyz{
       border-color:1px solid #ddd;
    }

我需要用#xyz替换.xyz（或任何其他ID选择器），而无需更改color: #ee2ee2（或任何其他颜色选择器）。基本的Java脚本代码即可完成

我已经尝试过一些正则表达式，但是在某些情况下失败了

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

通过匹配行首的空格，可以使用正则表达式^\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");

Answer 4

我在这里的建议是使用一个库，该库可以按照@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操场上测试此实现。

用。（Class）

4 个答案: