详解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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
单元选择合并变色示例代码
May 26 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
浅谈如何使用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学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
在视频前插入广告
2006/11/20 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
外语专业毕业生自荐信
2014/04/14 职场文书
空气的环保标语
2014/06/12 职场文书
十佳家长事迹材料
2014/08/26 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript