如何使用带有 gulp-replace 的捕获组？答案

【问题标题】：How to use a Capture Group with gulp-replace?如何使用带有 gulp-replace 的捕获组？
【发布时间】：2017-03-08 05:38:48
【问题描述】：

gulp-替换 0.5.4

当前通过 gulp 和 rev：

<link rel="stylesheet" href="assets/styles/app-3c224ff086.css">

目标：

<link rel="stylesheet" href="assets/styles/app-3c224ff086.css" media="screen">

结果：

<link rel="stylesheet" href="$1" media="screen">

初始测试是：https://regex101.com/r/miM7TN/1。我可能已将测试与 $0 的捕获组相关联，但在我的项目中，我使用的是捕获组 1。

在我的 gulp 任务中添加了以下内容：

var regex = /\"assets\/styles\/app-+.*\"/;
var subst = `$1 media="screen"`;
.pipe(replace(regex, subst))

正在找到包含开始和结束引号的字符串。我得到的不是一个捕获组，而是一个字面的 $1。如何获得捕获组的实际值？ gulp-replace 文档显示了替换值“$1foo”。 SO上的类似问题显示“$ 1”和“$ 1”，我还没有看到我的情况有什么不同。我试过反引号、单引号和双引号。

【问题讨论】：

$1 指的是ID=1的捕获组，第一个(...)。您必须使用var regex = /("assets\/styles\/app-+.*")/; 来让$1 以与$& 相同的方式“工作”（反向引用整个匹配值）（或在最近的浏览器版本中使用$0）。或者，是的，尝试在您当前的替换模式中将 $0 替换为 $&。
顺便说一句，regex101 无法识别有效的$& JS 反向引用，它是一个bug。仅在目标环境中测试。
@WiktorStribiżew 谢谢。在 /" 之前和之后添加 () 修复它。

【解决方案1】：

$1 反向引用指的是 ID 为 1 的捕获组，即使用模式中的第一个 (...) 捕获的文本。

你必须使用

 var regex = /("assets\/styles\/app-+.*")/;

$1 以与$& 相同的方式“工作”（反向引用整个匹配值）。

【讨论】：

【解决方案2】：

您可以使用回调作为 gulp-replace 中的第二个参数。该函数在每个捕获组上循环。这是我将 camelCase 变量转换为 css 表示法的示例

.pipe(replace(/([A-Z])/g, function(match){
  return '-'+match.toLowerCase()
}))

{camelCase1: 1, camelCase2: 2}

变成camel-case1和case-case2

【讨论】：