设计求职招聘QQ群 http://nvrenjkw.com/nxzx/5469.html大家好，我还是我，哪个爱聊点电脑技巧的胖小伙-廖晨。
不论你是前端工程师，还是后端工程师，都会用到一项技术：正则表达式，由于有很高的逻辑性，在编写复杂的表达式时，需要测试调整很多次，之前我都是在测试网站上调试和验证，其实在常用的编辑器里，就有这种插件。
我就以vscode和webstorm系列的开发，都有这种插件，接下来，我详细绍下这个插件安装和具体法吧。
Regexpreviewer
vscode编辑器中，安装插件非常简单：
点击扩展按钮或ctrl+shift+x，在搜索框regex，第一个就是，点击安装即可。
Regexpreviewer插件
即便你完成了安装，但是并不是你在所有的文件里，编写正则表达式，都可以调出插件调试的，它需要在特定文件类型里才能使用，支持的文件类型有：js,php，haxe等。
我以js文件为例，演示一下具体的使用方法吧。当编写输入：letreg=/[0-9]{3,}/g,三位以上的数字，就会在对应的正则表达式上面出现testRegex按钮或点击或按ctrl+alt+m快捷键，会在右侧弹出插件自带测试内容，自动高亮显示匹配项，结果如下：
当然你也可以修改测试案例内容，比如我想匹配abab,00,aa,bb,abcabc,正则表达式为：/(\w+)\1/g,
测试结果一目了然，怎么样，这样就不用再为测试正则表达式发愁了。不过，要说功能强，还是得说webstorm系列编辑器的插件：
RegexTester
这里以webstorm编辑器为例，介绍一下插件的安装和使用方法。在操作上，会比vscode稍微蛮烦一丢丢，不过相对强大的功能来说，这点操作又算什么呢！
安装方法：点击菜单file-settings或ctrl+alt+s,选则plugins,在搜索框输入：Regex,点击install。
完成后，就会在状态栏上多出一个RegexTester按钮，点击就可以使用插件了。
不论功能的完整，还是支持模式多样上，它都完胜Regexpreviewer，它不仅支持find(查找),还支持match匹配，Replace(替换），split(拆分),这里简单说一下，find和match的区别，find功能是匹配包含符合规则的字母，单词组合。而match则是测试内容完全匹配才会高亮显示，就是非黑即白。
接下来重点介绍一下拆分和替换：
split拆分：以匹配的内容为分隔符，筛选出分隔符两侧的内容，比如1，2，3，4，正则表达式：,就分割为：;
拆分功能示意图
replace(替换):替换就比较简单理解了，就是将匹配内容替换成你输入内容，还是1，2，3，4，你像将逗号替换成；，点击replace后，在replacement中输入；，结果如下：
替换功能示意图
除了上述功能外，regexpreviewer细节做得很好，在javascript正则表达式中，我们时常会用到正则表达式中反向引用功能，比如我们要配置aa或abab，就需要用到反向引用，就可以写成([a-z]+)\1,插件可以点中\1,就会自动显示对应引用得表达式部分。
可能有人要说了，就这一眼都能看出来，还用高亮显示吗？确实，但稍微复杂一点，就很难找到正确的反向引用，因为反向的引用是以()为标志单位的，而()还有一个含义组合，集合的意思。如果你可以毫不费力地看清反向引用对应的因式部分，不管时对于正则表达式编写，还是理解他人编写的正则，都是非常有用的功能，你觉得呢？
好了，今天的文章就到这了，希望你从中有所收获，喜欢的话，别忘了
