Question

为了限制较大项目中不同方使用的css库的范围（从而减少冲突），我成功创建了一个正则表达式代码，该代码将所有css选择器与给定选择器相加（在本例中为＃测试ID，例如：https://regex101.com/r/SNJZx2/1）。

为了使这项工作更有用，我想

复制所有带前缀的选择器（具有＃test-id且以,或{结尾的选择器）
用另一个选择器替换＃test-id的重复值（比如说＃test-id-1）

示例CSS：

#test-id .breadcrumb,
#test-id .button {
  user-select: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

@media screen and (min-width:769px), print {
  #test-id .is-size-1-tablet {
    font-size: 3rem !important
  }
}

所需结果：

section#test-id-1 .breadcrumb, 
#test-id .breadcrumb,
section#test-id-1 .button, 
#test-id .button {
  user-select: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

@media screen and (min-width:769px), print {
  section#test-id-1 .is-size-1-tablet,
  #test-id .is-size-1-tablet {
    font-size: 3rem !important
  }
}

注意：现实世界中的文件可能会缩小，这意味着与换行符^的匹配（作为一个可靠的起点）可能无法正常工作。

因此，我们现在已经成功地限制了CSS文件的范围，并且还允许将其应用于多个“部分”。

什么是RegEx有用的方法？

干杯！

Answer 1

这应该有效：

s = s.replace(/(#test-id.+),/g, "$1,\nsection$1,")
s = s.replace(/(#test-id.+){/g, "$1,\nsection$1{")

对于这两个选项，我们需要两个正则表达式： 1.如果定义不是最后一个（即以逗号结尾） 2.如果是最后一个（以花括号结尾）。

这里是一个小提琴：https://jsfiddle.net/vs0mrcfa/9/

正则表达式-复制CSS选择器并替换为新选择器

1 个答案: