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

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

本次分享的是我一次使用正则在编辑器搜索并完成替换代码的经历，之间作优化的时候，须要给文本输入框添加修饰符 .trim，这样的 input 框不少，分布在不少文件，不太可能一个个去找而后去修改，所以想到用正则去匹配线找到这些 input 框，而后再给它加上 .trim, 这样的话比较精准和省时省力。 并且大部分代码编辑器支持正则的匹配替换。能够在编辑器中完成，不过要注意的是，vscode 不支持换行符匹配，只能匹配到一行的文本内容，因此此次我用webstorm去完成，（它30天免费试用，过时后，每次也能够打开使用30分钟）

背景

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

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

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

编写正则表达式

使用正在表达式查找的话，能够比较准确的找到，要找到这样的 v-model 须要知足下面三个条件：

1. v-model= 须要在 s-input 以后，还要排除数字输入框 input-number 的状况，中间能够包括空字符、换行符以及非空字符：

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

   • a(?!b) 先行否认断言：<s-input 只有不在 -number 前面才匹配
   • 惰性匹配 ? : 用 [\s\S]* 匹配空字符、换行符以及非空字符，由于匹配的是任意字符，若是不加 ? 让其变成惰性匹配，那会查找到文件最后一个 v-model= ，加上后找到第一个就中止下来，因此中间这段用 [\s\S]*?。

2. 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。

由图所示，编辑器中已经很智能地提示替换后的样子。

全局替换

最后选择目录使用全局替换，检查是否都匹配正确，和处理特殊的部分代码，最后确认无误后替换所有。

总结

大多数状况，咱们能够用文本就能够搜索到想要的内容，因此用的不是不少，但若是你很熟悉正则表达式，用正则能够更精准地搜索到想找的内容，

另外你想大规模修改相同逻辑的代码，能够先匹配找到目标代码，仔细检查后修改。

引用

在 Visual Studio 中使用正则表达式

捕获组