详解可以用在VS Code中的正则表达式小技巧


Posted in Javascript onMay 14, 2019

你是不是一直都想学正则表达式,但是因为它的复杂性而被推迟了?在本文中,我将向你展示五个易于学习的正则技巧,你可以立即在自己喜欢的文本编辑器中使用它们。

详解可以用在VS Code中的正则表达式小技巧

文本编辑器设置

虽然现在几乎所有的文本编辑器都支持正则表达式,但我在本教程中用的是 Visual Studio Code,不过你可以使用任何你喜欢的编辑器。另请注意,你通常需要在搜索输入框附近的某处打开 RegEx 开关。以下是在 VS Code 中执行此操作的方法:

详解可以用在VS Code中的正则表达式小技巧

你需要通过选中此选项启用RegEx

1) .  —  匹配任何字符

让我们开始吧。点符号 . 用来匹配任何字符:

b.t

详解可以用在VS Code中的正则表达式小技巧

上面的正则匹配 "bot"`"bat"和任何以b开头、t结尾的三个字符的单词。但是如果你想搜索点符号,则需要用 \ 来对它进行转义,所以下面这个正则只匹配确切的文本 "b.t"

b\.t

详解可以用在VS Code中的正则表达式小技巧

2) .*  —  匹配任何东西

这里 . 表示“任何字符”* 表示“此符号重复前面那个内容任何次数。” 把它们放在一起(.*)表示“任何符号重复任意次数。” 例如,你可以用它来查找以某些文本开头或结尾的匹配项。假设我们有一个这样的 javascript 方法

loadScript(scriptName: string, pathToFile: string)

我们想找到这个方法的所有调用,其中 pathToFile 指向文件夹“lua” 中的任何文件。可以使用以下正则表达式:

loadScript.*lua

这意味着,“匹配所有以 "loadScript" 开始同时以"lua"结束的字符串。”

详解可以用在VS Code中的正则表达式小技巧

3) ?  —  非贪婪的匹配

.* 之后的 ? 符号和其他一些匹配规则意味着“尽可能少的匹配”。 在上一张图中,每次匹配都会得到两次 "lua"字符串,直到第二个 "lua" 所有东西才能全部匹配完毕。如果你想匹配第一次出现的"lua",可以使用以下正则:

loadScript.*?lua

这意味着,“匹配所有以 "loadScript"开头,后面为任意字符,直到第一次出现"lua"

详解可以用在VS Code中的正则表达式小技巧

loadScript.*?lua:匹配以 loadScript 开头的所有内容,直到第一次出现"lua"

4) `( ) ###  — 捕获组和反向引用

好的,现在我们可以匹配一些文字了。但是如果想要修改我们发现的部分文本呢?这时候就要用到捕获组。

假设我们修改了 loadScript 方法,现在需要在它原来的两个参数之间插入另外一个参数。让我们把这个新参数命名为 id,这时新的函数原型应如下所示:loadScript(scriptName,id,pathToFile)。我们在这里不能用文本编辑器的常规替换功能,不过正则表达式能够帮助我们。

详解可以用在VS Code中的正则表达式小技巧

通过上图你可以看到运行以下正则表达式的结果:

loadScript\(.*?,.*?\)

这意味着:“匹配以 "loadScript(" 开头的, 后面跟任意内容,直到遇到第一个, ,然后是任意内容,直到第一个)

对你来说,可能看唯一起来比较奇怪的是 \ 符号。它们用于对括号进行转义。

因为符号 () 是正则表达式用来捕获匹配文本部分的特殊字符,但我们需要匹配实际的括号字符,所以需要对它们进行转义。

在前面的表达式中,我们使用.*?符号定义了方法调用的两个参数。要使每个参数作为单独的捕获组,需要在它们的前后分别添加()符号:

loadScript\((.*?),(.*?)\)

如果你运行这段正则,你将看到没有任何变化。这是因为它匹配的是相同的文本。但现在我们可以将第一个参数称为\$1,将第二个参数称为\$2。这称为反向引用,它将帮助我们做自己想要的事情:在两个参数中间添加另一个参数:

搜索输入:

loadScript\((.*?),(.*?)\)

这与之前的正则相同,但分别将参数映射到倒了捕获组1和2。

替换输入:

loadScript($1,id,$2)

这意味着“用文本"loadScript("、捕获组1、"id"、捕获组2和 ) 替换每个匹配的文本 ”。请注意,你不需要在替换输入中转义括号。

详解可以用在VS Code中的正则表达式小技巧

5) [ ]  —  字符类

你可以在 [ ] 符号内来列出要在特定位置匹配的字符。例如,[0-9]匹配从0到9的所有数字。你还可以明确列出所有数字:[0123456789] —— 与前面的含义相同。你也可以使用带字母的破折号,[a-z] 将匹配所有小写拉丁字符,[A-Z] 将匹配所有大写拉丁字符,[a-zA-Z] 将会匹配两者。

你也可以在字符类之后使用 *,就像在 . 之后一样,在这种情况下意味着:“匹配此类中任意数量的字符”

详解可以用在VS Code中的正则表达式小技巧

后记

你应该知道有几种正则表达式的写法。我在这里讨论的是 javascript RegEx 引擎。大多数现代引擎都很相似,但也可能会存在一些差异。通常这些差异包括转义字符和反向引用标记。

你现在就可以打开文本编辑器,立即开始使用其中的一些技巧。你将看到可以比以前更快地完成许多重构任务。一旦你掌握了这些技巧,就可以开始研究更多的正则表达式了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 #Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
JavaScript中this的全面解析及常见实例
May 14 #Javascript
jquery 验证用户名是否重复代码实例
May 14 #jQuery
记录vue项目中遇到的一点小问题
May 14 #Javascript
javascript中如何判断类型汇总
May 14 #Javascript
详解如何探测小程序返回到webview页面
May 14 #Javascript
You might like
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php封装的验证码类分享
2017/02/26 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
js 提交和设置表单的值
2008/12/19 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
在Python的Django框架中创建和使用模版
2015/07/15 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
详解python metaclass(元类)
2020/08/13 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
J2EE系统只能是基于web
2015/09/08 面试题
求职信写作要突出重点
2014/01/01 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
村委会主任先进事迹
2014/01/15 职场文书
2015年安全生产责任书
2015/01/30 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers