深入理解JS正则表达式---分组


Posted in Javascript onJuly 18, 2016

深入理解JS正则表达式---分组

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

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

•捕获性分组
•非捕获性分组

捕获性分组

捕获性分组会在 比如 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了,虽然后面还有能够匹配到的结果,但是这里是尽可能少的去匹配

非捕获性分组

非捕获性分组也就是 有些地方需要用到一对括号,但是又不想让他成为一个捕获性分组也就是不想让这个分组被类似 macth exec 这样的函数所获取到通常在括号内部的前面加上?: 也就是 (?:pattern)这样就变成了一个非捕获性分组,

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

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

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

以上这篇深入理解JS正则表达式---分组就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JS版微信6.0分享接口用法分析
Oct 13 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 #Javascript
简单的JS轮播图代码
Jul 18 #Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 #Javascript
Bootstrap零基础学习第一课之模板
Jul 18 #Javascript
深入分析javascript中的错误处理机制
Jul 17 #Javascript
javascript正则表达式中分组详解
Jul 17 #Javascript
最佳的JavaScript错误处理实践
Jul 16 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
php上的memcache和memcached两个pecl库
2010/03/29 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
JavaScript 参考教程
2006/12/29 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
js实现双色球效果
2020/08/02 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python实现的字典值比较功能示例
2018/01/08 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
线程同步的方法
2016/11/23 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python