javascript正则表达式中分组详解


Posted in Javascript onJuly 17, 2016

之前写了一篇关于正则新手入门的文章,本以为对正则表达式相对比较了解 但是今天我又遇到了一个坑,可能是自己不够细心的原因吧,今天就着重和大家分享一下javascript正则表达式中的分组。如果你对JS正则表达式不够理解 可以点击这里了解更多。

分组在正则中用的还是比较广的,我所理解的分组 就是一对括号() ,每一对括号 就代表了一个分组,

分组可以分为:

  1. 捕获性分组
  2. 非捕获性分组
  3. 捕获性分组

捕获性分组会在 比如 match exec这样的函数中以第二项,第三项的形式得到相应分组的结果。先来看一个例子吧

var reg = /test(\d+)/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "001", index: 4, input: "new test001 test002"]

代码中 (\d+)是一个分组(有些人也叫他子模式),但是表示的都是同一个意思,上面的例子中 test001是完全匹配的结果,
然而 分组的匹配是从整个完全匹配结果(也就是test001)中来查找与子模式\d+匹配的字符,这里显然是 001.

但是今天遇到的情况是这样的

var reg = /test(\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", "1", index: 4, input: "new test001 test002"]

不同之处就是 (\d+) 改为了 (\d)+ ,整个匹配结果还是 test001 但是第一个分组匹配的结果却不同。

咱们慢慢来分析他们的区别

(\d+) 这整个是一个分组的情况,由于 默认情况下 匹配模式都是贪婪模式 也就是说尽可能多的去匹配
所有\d+ 匹配到的结果 是 001 然后 外面添加了一对括号 也就是一个分组,这样第一个分组中匹配的结果就是 001.

再来看第二个例子中的 (\d)+ 同样这也是一个贪婪模式 首先会先匹配0然后后面是0 也会匹配到 最后是1 同样也匹配到 到此 匹配结束

看起来跟第一个例子中的匹配没什么区别,但是这里的 分组(\d)表示 匹配单个数字,

按照我之前的理解是 会匹配最开始匹配到的结果 也就是0 但这种理解是错误的。由于整个匹配是贪婪模式,尽可能多的去匹配

分组中的 (\d) 就会捕获 最后一次匹配到的结果 1

如果是非贪婪模式 那就会尽可能少的去匹配

var reg = /test(\d)+?/;
 var str = 'new test001 test002';
 console.log(str.match(reg));

//["test001", "0", index: 4, input: "new test001 test002"]

这样(\d)匹配结果就是0了,虽然后面还有能够匹配到的结果,但是这里是尽可能少的去匹配

非捕获性分组

var reg = /test(?:\d)+/;
 var str = 'new test001 test002';
 console.log(str.match(reg));
//["test001", index: 4, input: "new test001 test002"]

非捕获性分组也就是 有些地方需要用到一对括号,但是又不想让他成为一个捕获性分组也就是不想让这个分组被类似 macth exec 这样的函数所获取到

通常在括号内部的前面加上?: 也就是 (?:pattern)这样就变成了一个非捕获性分组,

这样 match的结果中就不会出现分组匹配到的内容了 也就是少了 第二项的 1.

这篇文章着重说明 (\d+)和 (\d)+的区别,也是我今天踩到的坑,若有错误之处,欢迎指正。

Javascript 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
使用JS动态显示文本
Sep 09 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 #Javascript
js canvas实现擦除动画
Jul 16 #Javascript
微信jssdk用法汇总
Jul 16 #Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
很棒的js选项卡切换效果
Jul 15 #Javascript
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
You might like
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
javascript 精粹笔记
2010/05/09 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
python获取糗百图片代码实例
2013/12/18 Python
Python中optparse模块使用浅析
2015/01/01 Python
Python实现测试磁盘性能的方法
2015/03/12 Python
Python实现把数字转换成中文
2015/06/29 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
办公室文秘岗位职责
2013/11/15 职场文书
高中军训感言400字
2014/02/24 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
未婚证明书模板
2014/10/08 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
离职告别感言
2015/08/04 职场文书