深入理解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 相关文章推荐
jquery获取radio值实例
Oct 16 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Angular的事件和表单详解
Dec 26 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JS随机数产生代码分享
Feb 24 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 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
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php动态生成函数示例
2014/03/21 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
js里的prototype使用示例
2010/11/19 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python 类之间的参数传递方式
2019/12/20 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
如何用Python 加密文件
2020/09/10 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
什么叫做SQL注入,如何防止
2016/10/04 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
会计岗位职责
2013/11/08 职场文书
技术人员面试提纲
2013/11/28 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
2014年班务工作总结
2014/12/02 职场文书