详解javascript 正则表达式之分组与前瞻匹配


Posted in Javascript onMay 30, 2018

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清。所以在这里总结一下,如有不对,还望大神指点。

1.分组匹配:

1.1捕获性分组匹配 ()

2.2非捕获性分组匹配 (?:)

2前瞻匹配:

2.1正向前瞻匹配: (?=表达式) 后面一定要匹配有什么

2.2反向前瞻匹配: (?!表达式) 后面一定不能要有什么

1.1、捕获性分组匹配 ()

var str1 = "holle word 123456 can 12s a 123 a";
var reg1 =/([a-z]+)\s(\d+)/; //不是全局模式 ,以() 分组,这里有两组,每一组都将匹配得到
var regg1 = /([a-z]+)\s(\d+)/g; //全局模式 g,以() 分组,这里有两组,每一组都将匹配得到
//res :非全局模式
console.log(reg1.exec(str1)); //exec()方法:["wold 123456","word","123456"]
console.log(str1.match(reg1));//match()方法:["word 123456","word","123456"]
console.log(RegExp.$1);//获取到第一个分组 ([a-z]+) 匹配的结果 :word
console.log(RegExp.$2);//获取到第一个分组 (\d+) 匹配的结果 :123456
//res :全局模式
console.log(regg1.exec(str1)); //exec()方法:["wold 123456","word","123456"]
console.log(str1.match(regg1));//match()方法:["word 123456","can 12","a 123"]
console.log(RegExp.$1);//获取到第一个分组 ([a-z]+) 匹配的结果 :a
console.log(RegExp.$2);//获取到第一个分组 (\d+) 匹配的结果 :123

分析:这个正则表达式匹配的是,至少一个字母,跟着一个空格,然后至少一个数字,

非全局就是第一次匹配正确就不会再往后匹配 了,

1.exec()方法提取的值是规定的,第一个值是正则表达式相匹配的文本,如上示例的"/([a-z]+)\s(\d+)/",第2个值是第一个字子表达式(即第一个分组),如上示例的"([a-z])",以此类推

2.即使是全局模式,exec()都不会全局匹配,循环调用exec()是唯一全局匹配的方式,所以你会发现上面使用exec()方法的结果是一样

3.而 match 方法在全局模式的捕获性分组匹配,会对正则表达式全局匹配,但是不会对子表达式匹配(分组),所以你会发现上面str1.match(regg1) 的结果是不会单独以分组([a-z]+)字母或者分组(\d+)数字出现,而是全局匹配整一个正则,所以结果是["word 123456","can 12","a 123"]

4.match 方法在非全局模式 的捕获性分组匹配中,会对正则表达式全局匹配,也会对子表达式匹配(分组),所以你发现,str1.match(reg1)匹配的结果有单独分组的匹配,但是因为是非全局,所以第一次匹配正确就结束了,只有["wold 123456","word","123456"],“wold 123456” 是整个表达式匹配的结果,“word” 是第一个分组([a-z]+)匹配的结果,“123456” 是第二分组(\d+) 匹配的结果

5.$1,$2... 分别包含正则表达式中的相对应反向引用,在全局与非全局模式,如果结果集有多个,会以最后一次匹配的结果来算,如上面,全局模式,匹配一共有三个符合的,["word 123456","can 12","a 123"],那么就以最后一个"a 123"为所有分组得到的结果,第一个分组是([a-z]+) 匹配的是字母所以是a,第二个分组是数字(\d+),所以是123 ,以此类推,如果只出现一次,一次也是当最后一次,自然也是一样的分析,哈哈哈,有点多余。。。。

 1.2 (?:) 非捕获性分组匹配 ,不捕获子表达式(分组)

var str1 = "holle word 123456 can 12s a 123 a";
var reg2 = /(?:[a-z]+)\s(?:\d+)/;
var regg2 = /(?:[a-z]+)\s(?:\d+)/g;
//res :非全局模式
console.log(reg2.exec(str1));// exec(): 直接匹配["wold 123456"],
console.log(str1.match(reg2));//match()方法:["word 123456"]
//res :全局模式
console.log(regg2.exec(str1));// exec(): 直接匹配["wold 123456"],
console.log(str1.match(regg2));//match()方法:["word 123456","can 12","a 123"]

分析,和上面的捕获性分组匹配是一样的解析,只是不再匹配子表达式(分组)

2.1正向前瞻匹配: (?=表达式) 后面一定要匹配有什么

注意:前瞻分组匹配(?=表达式) 会作为匹配内容,不会作为匹配结果返回

//实例,提取以jpg类型的图片名称
var str2 = "ab.jpg,admin/12.gif,and.jpg";
var reg3 = /[^\\]\w+(?=\.jpg)/g;
console.log(str2.match(reg3));//["ab", ",and"]

2.2反向前瞻匹配: (?!表达式) 后面一定不能要有什么

//示例:匹配 连续a字母三个以上,且后面不能有数字
var str3 = "aaa12345,aaaadmin,aaaaaadd,dlala";
var reg4 = /a{3,}(?!\d+)/g;
console.log(str3.match(reg4));//["aaaa","aaaaaa"]

总结

以上所述是小编给大家介绍的javascript 正则表达式之分组与前瞻匹配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
vue-router传参用法详解
Jan 19 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
微信小程序实现自定义底部导航
Nov 18 Javascript
浅谈如何使用webpack构建多页面应用
May 30 #Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 #Javascript
Angular4 反向代理Details实践
May 30 #Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 #Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 #Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 #Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 #Javascript
You might like
PHP判断是否微信访问的方法示例
2019/03/27 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
javascript中eval和with用法实例总结
2015/11/30 Javascript
JavaScript手机振动API
2016/06/11 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python实现的建造者模式示例
2018/08/06 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
奥利奥广告词
2014/03/20 职场文书
大学新闻系求职信
2014/06/03 职场文书
应聘护士求职信
2014/07/21 职场文书
优秀教师先进材料
2014/12/16 职场文书
初三毕业评语
2014/12/26 职场文书
简爱读书笔记
2015/06/26 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android