在编辑器中巧妙地使用正则完成捕获替换-一一网

我们都知道，正则表达式能够精准地帮助我们匹配代码，而编辑器提供了利用正则表达式去查找我们想要的代码，本文结合实战，利用正则表达式搜索和替换来解决问题，由于 VsCode 只能搜索到当行的，所以我使用的编辑器是 Webstorm 来进行匹配替换。

背景

希望给项目中所有输入框 v-model 都加上 .trim 修饰符，但是改动的地方很多，一个一个改不太可能，所以想到了全局查找和替换，问题来了，如何去查找？

分析：随便先找一个代码看看

    <s-input
      class="input-range-input"
      @input="handleInputChange"
      v-model="range_value"
      :disabled="disabled"
    />
复制代码

编写正则表达式

使用正在表达式查找的话，可以比较准确的找到，要找到这样的 v-model 需要满足下面三个条件：

v-model= 需要在 s-input 之后，还要排除数字输入框 input-number 的情况，中间可以包括空字符、换行符以及非空字符：
```
<s-input(?!-number)[\s\S]*?v-model=
复制代码
```
- a(?!b) 先行否定断言：<s-input 只有不在 -number 前面才匹配
- 惰性匹配 ? : 用 [\s\S]* 匹配空字符、换行符以及非空字符，因为匹配的是任意字符，如果不加 ? 让其变成惰性匹配，那会查找到文件最后一个 v-model= ，加上后找到第一个就停止下来，所以中间这段用 [\s\S]*?。
v-model= 与 > 之间可以包括空字符、换行符以及非空字符
```
v-model=[\s\S]*?>
复制代码
```
同理，可以在 v-model 和 > 之间用 [\s\S]*?。

最后完整的表达式就是：

<s-input(?!-number)[\s\S]*?v-model=[\s\S]*?>
复制代码

编辑器查找替换功能

查找

编辑器都自带搜索替换功能，除了文本查找之外，还可以使用正则表达式去查找，如图所示：

有了这个可以愉快去写正则啦，根据上面总结好的正则表达式：

<s-input(?!-number)[\s\S]*?v-model=[\s\S]*?>
复制代码

根据这个正则在编辑器搜索，最后得到的结果，是匹配代码中 <s-input 到 v-model 的所有内容。(vscode没有搜索到换行的数据，使用 webstorm 可以搜索得到)

替换

编辑器的替换，可以使用捕获组合和替换模式

捕获组: 用()包起来设置捕获组，然后按左括号将组从左到右编号。
在正则表达式中：请使用 \number。例如，正则表达式 (\w+)\s\1 中的 \1 引用第一个捕获组 (\w+)。
在替换模式中：请使用 $number。例如，已分组的正则表达式 (\d)([a-z]) 定义了两个组：第一个组包含一个十进制数字，第二个组包含一个 a 到 z 之间的字符。该表达式在以下字符串中查找四个匹配项：1a 2b 3c 4d。替换字符串 z$1 仅引用第一个组（$1），并将该字符串转换为 z1 z2 z3 z4。

所以把除了 v-model= 之外的都用 () 设置成了捕获组，这样在替换模式中就可以用 $ 去引用。

(<s-input(?!-number)[\s\S]*?)v-model=([\s\S]*?>)
复制代码

设置成捕获组之后，我们可以在替换的输入框中用 $1 引用第一个组 (<s-input(?!-number)[\s\S]*?), $2 引用 ([\s\S]*?>)，把中间 v-model 改成 v-model.trim=，完整的替换表达式就是 $1v-model.trim=$2。