替换评论之间的内容

Replace content that is between to comments

我想替换两条评论之间的内容,例如

/**** 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 中遇到错误:灾难性回溯

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

第二个变化是把(.|[\r\n])*?变成[\s\S]*?。无需每次都针对两个选项进行正则表达式检查。如果是一组字符,只需将它们添加到同一个字符class。 [\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, ''))

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

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

解释:

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

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

Live demo

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

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

Live demo

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

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);