• 技术文章 >web前端 >js教程

    如何实现JS内正则分组与前瞻匹配

    php中世界最好的语言php中世界最好的语言2018-06-01 09:25:18原创803
    这次给大家带来如何实现JS内正则分组与前瞻匹配,实现JS内正则分组与前瞻匹配的注意事项有哪些,下面就是实战案例,一起来看一下。

    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"]

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    怎么使用webpack3.0配置webpack-dev-server

    JS反射与依赖注入使用案例分析

    以上就是如何实现JS内正则分组与前瞻匹配的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 前瞻 分组
    上一篇:详细为你解决vue build打包之后首页白屏的问题(详细教程) 下一篇:d3.js实现自定义多y轴折线图步骤详解
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• 项目过大怎么办?如何合理拆分Angular项目?• 怎么使用pkg将Node.js项目打包为可执行文件?• 深入理解JavaScript内存管理和GC算法• 一文掌握JavaScript树结构深度优先算法• 聊聊Node.js中的多进程和多线程
    1/1

    PHP中文网