深入理解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异步回调的Promise模式封装实例
Jun 07 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 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数组生成html下拉列表的方法
2015/07/20 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP 断点续传实例详解
2017/11/11 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jqTransform美化表单
2015/10/10 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
英国领先的游戏零售商:GAME
2019/09/24 全球购物
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
大学新闻系求职信
2014/06/03 职场文书
村级四风对照检查材料
2014/08/24 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
辞职书格式样本
2015/02/26 职场文书
停水通知
2015/04/16 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技