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

 更新时间:2018年05月30日 11:16:45   作者:天高任鸟飞吧  
本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识,本人一直对两种匹配模棱不清,还有不清楚的朋友跟随脚本之家小编一起看看吧

本文主要讲解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 正则表达式之分组与前瞻匹配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js getBoundingClientRect() 来获取页面元素的位置

    js getBoundingClientRect() 来获取页面元素的位置

    该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。
    2010-11-11
  • javascript 计算两个整数的百分比值

    javascript 计算两个整数的百分比值

    用来计算两个整数的百分比值的代码,需要的可以看看。
    2009-12-12
  • javascript实现前端分页效果

    javascript实现前端分页效果

    这篇文章主要为大家详细介绍了javascript实现前端分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • TypeScript命名空间讲解

    TypeScript命名空间讲解

    这篇文章主要介绍了TypeScript命名空间,TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。由微软开发的自由和开源的编程语言。设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上,下面来看详细内容吧

    2021-12-12
  • JS ES6中setTimeout函数的执行上下文示例

    JS ES6中setTimeout函数的执行上下文示例

    这篇文章主要给大家介绍了关于JS ES6中setTimeout函数的执行上下文的相关资料,文中给出了详细的介绍和示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-04-04
  • js中调用微信的扫描二维码功能的实现代码

    js中调用微信的扫描二维码功能的实现代码

    这篇文章主要介绍了在js中调用微信的扫描二维码功能的实现代码,本文给大家分享了注意事项及常见问题分析,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 通过layer实现可输入的模态框的例子

    通过layer实现可输入的模态框的例子

    今天小编就为大家分享一篇通过layer实现可输入的模态框的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现仿腾讯微博无刷新删除微博效果代码

    JS实现仿腾讯微博无刷新删除微博效果代码

    这篇文章主要介绍了JS实现仿腾讯微博无刷新删除微博效果代码,涉及JavaScript实现Ajax无刷新删除的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js propertychange和oninput事件

    js propertychange和oninput事件

    项目中常遇到输入框检查的需求,比如即时搜索,用change事件?change事件失去焦点才发生,无法做到即时。keypresss事件?能监听到键盘,但监听不到鼠标复制粘贴,不完美
    2014-09-09
  • 操作按钮悬浮固定在微信小程序底部的实现代码

    操作按钮悬浮固定在微信小程序底部的实现代码

    在一些购物平台经常需要将商品加入购物车,像加入购物车按钮、结算按钮、收货列表添加地址按钮都是按钮悬浮底部的,怎么实现这样的功能呢?下面小编给大家带来了操作按钮悬浮固定在微信小程序底部的实现代码,一起看看吧
    2019-08-08

最新评论