在Javascript

Question

我正在尝试使用Javascript解析媒体查询。

我打算将标记字符串看起来像这样

@media not screen and (min-width: 700px) {
    padding-left: 30px;
    background: url(email-icon.png) left center no-repeat;
}
@media (max-width: 600px) {  
   color: red; 
}

输出：

@media not screen and (min-width: 700px) {
    .foo{
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}
@media (max-width: 600px) { 
   .foo{ 
      color: red; 
   }
}

到目前为止，我有这个

const css =  `@media (max-width: 600px) {   color: red;    }`
const pattern = new RegExp('@media[^{]+([\s\S]+})\s*')

const cssnew = css.replace( pattern, (full,match) => `{ .foo${match}}` );
//   cssnew === "@media (max-width: 600px) {  .foo{ color: red;  }  }"

此正则表达式看起来适用于1（@media）https://regex101.com/r/r0sWeu/1 那没问题......但替换功能没有被调用？

感谢您的帮助

Answer 1

反斜杠也是字符串中的转义字符。将'@media[^{]+([\s\S]+})\s*'更改为'@media[^{]+([\\s\\S]+})\\s*'

Answer 2

您需要按如下方式修改代码：

const cssnew =  ` @media (max-width: 600px) {   color: red;    }`
const pattern = /(@media[^{]+{\s*)([\s\S]+?)(\s*})/g

console.log(cssnew.replace( pattern, "$1.foo{\n\t\t$2\n\t}$3" ));

注意：

• 在正则表达式构造函数中，反斜杠用于形成转义序列，并用于定义文字反斜杠it must be doubled。使用正则表达式文字/pattern/更容易，你不需要加倍反斜杠
• 新值应分配给您要修改为strings are immutable in JS
的变量
• 如果您只想使用捕获组值，则无需在replace方法中使用回调，只需使用将获得存储在组1中的值的反向引用$1。
• 另外，[\s\S]+过于贪心，要赶到第一个}，请使用懒惰版[\s\S]+?。