html编辑器查找与替换,VSCode 编辑器的正则表达式搜索和替换

场景

在写代码或者文档的时候，经常会批量的搜索或者替换一些文本；

如果这些文本有一定的规律，那么使用正则表达式来处理，是一个非常好的办法；

我在工作的时候，如果需要批量替换不同文本的文字，这些文本又有一定的规律可以寻找，基本都是正则来处理的，非常的方便，记录一下，给大家做一个参考；

如果在搜索里使用，我基本是用正则来进行模糊搜索，这也是一个非常赞的功能；

前置条件

如果你对正则一点都不了解，那么推荐查看本站的 正则表达式 教程

如果你对正则了解一些，但是又不是那么的熟练，那么推荐查看本站的 正则表达式 元字符 文章

需要一个支持正则表达式的编辑器，现在几乎所有的文本编辑器都支持正则表达式，比如 VSCode 、Atom 、 Sublime 、 Webstorm 、 IDEA 等等，你可以使用任何你喜欢的编辑器

正则表达式的模式开启

你通常需要在搜索输入框附近的某处打开 RegEx 开关。以下是在 VS Code 中执行此操作的方法：

在当前文档内操作

在指定文件夹下操作

正则匹配的内容直接替换

使用正则匹配需要查找的文字，然后全部替换成需要的结果

这是最常用的需求，直接写就好

搜索和替换的语法如下

搜索内容:^阿西河\w+教程

替换内容:阿东河教程

使用例子

把下面的文本，全部换为阿东河教程

阿西河CSS教程

阿西河JS教程

阿西河html教程

阿西河egg教程

阿西河react教程

截图演示

上面的操作是把匹配到的阿西河XXX教程，全部改为阿东河教程

正则的匹配的内容作为变量

这是利用正则表达式的结果，把结果作为变量来实现的，从而实现高级一点的场景；

搜索语法如下：

^阿西河(\w+)教程

带一个()套在你需要保留的文字，这样的正则匹配是可以拿到匹配到的变量

匹配语法如下

阿东河$1文档

$1是第一个括号内数据的变量，$2 $3...依次类推

注意：$0是匹配到的整个结果阿西河(\w+)教程，请根据自己的实际情况使用

使用例子

比如我需要匹配 阿西河XX教程这个精准内容，全部改为 阿东河XX文档；

阿西河CSS教程

阿西河JS教程

阿西河html教程

阿西河egg教程

阿西河react教程

更改为

阿东河CSS文档

阿东河JS文档

阿东河html文档

阿东河egg文档

阿东河react文档

那么就可以这写

搜索内容:^阿西河(\w+)教程

替换内容:阿东河$1文档

截图演示

这就是我经常进行的操作，如果你对正则了解的比较深入，你会操作更多内容，但是核心就是上面两点；

批量把复制的文件改为想要的格式

开始的样子: 我需要把内容给移动到上面，其实就是把换行符给全部删掉

点击替换后的样子：这样正则匹配后，一下就 OK 了，非常容易操作；

非常推荐你查看正则表达式 元字符 文章来了解