深入理解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 相关文章推荐
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
js+html实现点名系统功能
Nov 05 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
手把手教你python实现SVM算法
2017/12/27 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python3使用GUI统计代码量
2019/09/18 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
高中同学聚会邀请函
2014/01/11 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
电子银行营销方案
2014/02/22 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
追悼会悼词大全
2015/06/23 职场文书
公司员工管理制度
2015/08/04 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python