本次分享的是我一次使用正则在编辑器搜索并完成替换代码的经历，之间做优化的时候，需要给文本输入框添加修饰符 .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 需要满足下面三个条件：
-
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。
由图所示，编辑器中已经很智能地提示替换后的样子。
全局替换
最后选择目录使用全局替换，检查是否都匹配正确，和处理特殊的部分代码，最后确认无误后替换全部。
总结
大多数情况，我们可以用文本就可以搜索到想要的内容，所以用的不是很多，但如果你很熟悉正则表达式，用正则可以更精准地搜索到想找的内容，
另外你想大规模修改相同逻辑的代码，可以先匹配找到目标代码，仔细检查后修改。
