【问题标题】:Replace content that is between to comments替换评论之间的内容
【发布时间】:2026-02-09 21:05:02
【问题描述】:

我想替换两个 cmets 之间的内容,例如

/**** Useless CSS ****/
.my-class{
 margin: 12px;
}

/* Several Lines after including other comments **/

/**** END Useless CSS ****/

.other {
 padding: 12px;
}
/* Hello */

到目前为止我有:

[\/* Useless CSS \*\/](.|[\r\n])*?END Useless CSS \*\*\*\*\/?

但这不起作用。我在 Regex101 中遇到错误:灾难性回溯

【问题讨论】:

  • 请标记语言/工具。

标签: javascript regex css-parsing


【解决方案1】:

您的部分问题是您的正则表达式的第一部分。您正在使用[\/* Useless CSS \*\/],这是一个字符类,表示此集中的任何字符。换句话说,以下任何字符(删除重复字母后):/* UselCS。这绝对不是你的意图,但这就是它正在做的事情。下面的代码从模式中删除了字符类,使其明确匹配/**** Useless CSS ****/

第二个变化是将(.|[\r\n])*? 变成[\s\S]*?。无需每次都针对两个选项进行正则表达式检查。如果是一组字符,只需将它们添加到同一个字符类中即可。 [\s\S] 是一种表示任何字符(包括换行符)的方式。另一种方法(适用于 JavaScript,但其他正则表达式引擎不多)是使用 [^]

第三个更改是将\*\*\*\* 更改为\*{4}。这不仅更短更容易理解,而且还提高了性能,因为正则表达式引擎不需要逐个令牌 \*,然后是 \*,然后是 \*,等等。它被告知匹配 *四次,所以它一次性完成而不是 4。这意味着 \*\*\*\* 需要四个 步骤,而 \*{4} 只需要一个。

您还可以在末尾附加 \s* 以删除额外的空格。

\/\*{4} Useless CSS \*{4}\/[\s\S]*?\/\*{4} END Useless CSS \*{4}\/

var s = `/**** Useless CSS ****/
.my-class{
 margin: 12px;
}

/* Several Lines after including other comments **/

/**** END Useless CSS ****/

.other {
 padding: 12px;
}
/* Hello */`
var r = /\/\*{4} Useless CSS \*{4}\/[\s\S]*?\/\*{4} END Useless CSS \*{4}\//gi

console.log(s.replace(r, ''))

【讨论】:

    【解决方案2】:

    仅仅因为你可以使用正则表达式并不意味着你必须使用正则表达式。

    let css = `
    .boat {
    	float: left;
    }
    
    /**** Useless CSS ****/
    .my-class{
     margin: 12px;
    }
    
    /* Several Lines after including other comments **/
    
    /**** END Useless CSS ****/
    
    .other {
     padding: 12px;
    }
    /* Hello */`;
    
    const START_DELIMITER = '/**** Useless CSS ****/';
    const END_DELIMITER = '/**** END Useless CSS ****/';
    
    const left = css.slice(0, css.indexOf(START_DELIMITER));
    const right = css.slice(css.indexOf(END_DELIMITER) + END_DELIMITER.length);
    
    console.log(left + 'NEW STUFF' + right);

    【讨论】:

      【解决方案3】:

      您的正则表达式几乎可以工作,但您应该考虑如下所示的一些更改:

      (\/\*+ Useless CSS \*+\/)(.|[\r\n])*?END Useless CSS \*\*\*\*\/
      ^  ^ ^               ^  ^
      

      解释:

      • [...] 更改为(...)。前者定义一个字符类,后者定义一个组。
      • 转义 * 以表达文字字符,否则该字符可用作正则表达式量词

      • +量化\*以匹配序列中的*字符。

      Live demo

      还有(.|[\r\n]) 应该匹配任何字符直到一个点对于[\s\S][^](在JS 中)来说是一个不好的选择。此外,我会在模式末尾添加\s* 以匹配左侧空格:

      \/\*+ Useless CSS \*+\/[^]*?END Useless CSS \*+\/\s*
                                                       ^^^
      

      Live demo

      【讨论】: