详解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 相关文章推荐
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 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计算2点经纬度之间的距离代码
2013/08/12 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
培训主管的岗位职责
2013/11/23 职场文书
自考生自我评价分享
2014/01/18 职场文书
导师评语大全
2014/04/26 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
2016年学校招生广告语
2016/01/28 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server