深入理解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实现新闻滚动效果(实例代码)
Nov 27 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
JS动态显示倒计时效果
Dec 12 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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 和 MYSQL
2006/10/09 PHP
再谈IE中Flash控件的自动激活 ObjectWrap
2007/03/09 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
Python Requests安装与简单运用
2016/04/07 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python 一维二维插值实例
2020/04/22 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
英语演讲稿范文
2014/01/03 职场文书
讲党性心得体会
2014/09/03 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
班主任开场白
2015/06/01 职场文书
中秋节主题班会
2015/08/14 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL