JavaScript正则表达式的模式匹配教程,并且附带充足的实战代码(四 | 完结)

简介: 我们继续来学习正则表达式吧,没有看过之前文章的小伙伴建议点击上方链接,从第一篇开始看,本系列文章适合从未接触过或不太了解正则表达式的人

修饰符


正则表达式的修饰符是用以说明高级匹配模式的规则,并且修饰符是放在// 双斜杠外面的,例如这样 /java/g,g就是修饰符


接下来给出一张表,列出了修饰符的种类和含义


字符
含义
i
执行不区分大小写的匹配
g
执行全局匹配,即找到所有匹配的项并返回,而不是找到第一个之后就停止
m
多行匹配模式


我们来逐个讲解它们各自的用途:


  • 字符 i


我们之前会用这样的匹配模式去匹配 /[Jj]ava[Ss]cript/,这是因为我们不知道字符串中写的是 javascript 还是 JavaScript。其实我们可以直接用一个修饰符 i 来避免大小写的干扰,就想这样 /javascript/i


    let pattern = /javascript/ilet str = "JavaScript"
    str.match(pattern)        // 返回 ['JavaScript']  匹配成功


    我们可以看到,匹配时忽略了大小写的影响,仍然匹配成功了


    • 字符 g


    我们之前匹配字符串时,都是匹配到第一个就结束匹配返回内容,例如


      let pattern = /java/let str = "I love javascript and java"
      str.match(pattern)      //返回 ["java"]  匹配到javascript的java就返回了


      我们可以看到 str 字符串中,有两个java,但只匹配到javascript就返回了,如果我们要匹配到字符串中所有符合匹配模式的字符串,我们就可以用修饰符g,就像这样 /java/g


        let pattern = /java/glet str = "I love javascript and java"
        str.match(pattern)    //返回 ["java", "java"] 匹配到了所有的java


        • 字符 m


        如果一个字符串中包含换行符,则该字符串就有多行。这时我们可以使用修饰符 m 进行多行模式的匹配。


          let pattern = /java$/mlet str = "java\nis fun"
          str.match(pattern)            //返回 ['java'] 匹配成功


          在这个例子中,str内有一个换行符,这样的话,第一行就是 java ,第二行就是 is fun 。我们的匹配模式是查找每一行,只要这一行的结尾是java,就返回匹配到的内容。


          其实在这个例子中,我们看到,使用了修饰符 m 以后,锚字符 ^ 和 $ 不再是以一整个字符串的开头或结尾为匹配点了,而是以每一行的开头或结尾为匹配点。


          用于模式匹配字符串的方法


          我们在前面的很多例子中用到了search()方法 、match()方法,他们都是匹配字符串的方法,其实还有很多种匹配的方法,他们的用法和作用各不相同,我们来了解一下

          用于模式匹配字符串的方法有以下几种:


          1. search( )


          1. replace( )


          1. match( )


          1. split()


          接下来我们来详细讲解一下


          • search()


          该方法需要传入一个正则表达式作为参数,并返回第一个与之匹配的字符串的起始位置,若没匹配到,则返回-1


            "javascript".search(/script/)      //返回 4
            "javascript".search(/sccc/)        //返回-1


            • replace()


            该方法是用于字符串的检索与替换。需要传入两个参数,第一个参数为正则表达式;第二个参数为需要进行替换的字符串。匹配成功则会用第二个参数去替换匹配到的字符串,并返回替换后的整体字符串;若没匹配成功,则返回原来的整体字符串。


              "javascript".replace(/java/, 'python')  //返回 pythonscript
              "javascript".replace(/abc/, 'python')   //返回 javascript


              若使用了修饰符g,则会将所有匹配到的字符串都进行一个替换。


                "javascript and java".replace(/java/, 'python')  //返回 pythonscript and java"javascript".replace(/java/g, 'python')   //返回 pythonscript and python


                • match()


                该方法需要传入一个正则表达式作为参数,返回一个由匹配结果组成的数组,如果正则表达式使用了修饰符g,则将所有匹配到的结果都放到数组中并返回。


                  "javascript and java".match(/java/)   //返回 ['java']
                  "javascript and java".match(/java/g)   //返回 ['java', 'java']


                  补充:当match()传入一个非全局的正则表达式时,实际上返回的数组里有两个属性:index和input,他们分别表示匹配到的字符串的起始位置和检索的整个字符串。


                    let ret = "I love javascript and java".match(/java/)ret.index        //返回  7ret.input        //返回 I love javascript and java


                    • split()


                    该方法是用于将字符串分割,并将分割开的部分作为数组中的元素,最终返回一个数组。该方法需要传入一个正则表达式作为参数,去确定需要根据什么去分割这串字符串,若匹配成功,最终返回一个数组,数组中的元素就是每个被分割的字符串;若匹配失败,也会返回一个数组,数组中只有一个元素,那就是这个字符串整体。


                      '1,2,3,4,5,6'.split(/,/)   //返回 ['1', '2', '3', '4', '5', '6']
                      '1,2,3,4,5,6'.split(/\+/)  //返回 ['1,2,3,4,5,6']


                      RegExp对象的方法


                      RegExp对象定义了两个用于匹配的方法——exec()test(),这两个方法与我们之前讲到的用于模式匹配字符串的方法不同的是,前者是定义在RegExp对象上的方法,并且传入的参数是字符串;而后者是调用字符串的方法,传入的参数是RegExp对象。


                      • exec()


                      该方法就跟前面说到的不传入修饰符g的matach()方法一样,它对字符串执行一个正则表达式,如果匹配失败,返回null;如果匹配成功,则返回一个数组,数组的第一个元素是正则表达式匹配到的字符串,剩下的元素则是子表达式匹配到的字符串,同时该数组也包含indexinput两个属性。


                      来看一个例子,体会一下exec()方法的作用


                        let pattern = new RegExp("java", "g")let ret = pattern.exec("I love javascript and java")  //返回["java"]
                        ret.index     //返回 7ret.input     //返回 I love javascript and java


                        exec()match() 方法不同的是,不管正则表达式是否使用修饰符g,exec()都只会将第一个匹配到的字符串以及子表达式匹配到的字符串放到数组里返回;而match()方法在没有使用修饰符g时,跟exec()一样,如果使用了修饰符g,则将所有匹配到的字符串都放在数组里一起返回,并且不会返回圆括号里匹配到的字符串,同时,该数组里不包含indexinput两个属性。


                        那么这里引发一个疑问,既然不管是否使用修饰符g,exec()方法都只会返回第一个匹配到的字符串,那这个修饰符g有什么用呢?其实我们在前面有说到,RegExp对象内有一个属性叫做 lastIndex,该属性默认为0。当我们调用exec()方法,并且使用了修饰符g进行匹配时,若匹配成功,lastIndex将变为下一次检索开始位置的索引值;若匹配失败,lastIndex则重置为0


                          let pattern = new RegExp("java", "g")console.log(pattern.lastIndex)        //查看lastIndex默认为0let str = "I love javascript and java"
                          pattern.exec(str)               //进行第一次检索匹配,返回["java"]console.log(pattern.lastIndex)  //此时lastIndex为 4
                          pattern.exec(str)               //进行第二次检索匹配,返回["java"]console.log(pattern.lastIndex)  //此时lastIndex为 19
                          pattern.exec(str)               //进行第三次检索匹配,返回nullconsole.log(pattern.lastIndex)  //此时lastIndex为  0


                          从上面这个例子我们能看看到,lastIndex默认为0,表示从字符串的开头开始检索,当我们进行第一次检索时,匹配到了javascript中的java,返回了该字符串,这时lastIndex变为第一次匹配到的字符串的起始位置索引 4;我们进行第二次索引,是从索引 5 开始匹配的,往后检索到字符串末尾的java,并返回该字符串,同时lastIndex变为第二次匹配到的字符串起始位置索引 19;我们进行第三次索引,是从索引 20 开始匹配的,往后匹配,已经无法匹配到对应的字符串了,所以返回一个null,并将lastIndex重置为0,表示下一次检索又从字符串的开头开始检索。


                          • test()


                          该方法与exec()类似,该方法也是传入一个字符串作为参数,对该字符串进行检索,如果匹配到了相应的字符串,则返回true;如果没匹配到,则返回false。


                            let pattern = new RegExp("java", "g")let ret = pattern.test("I love javascript and java")  //返回 true

                            test() 与 exec() 相同的是,如果匹配时使用了修饰符g,test()也会根据对象内部属性 lastIndex 进行检索匹配,这里就不多做说明了。


                            正则表达式实战应用


                            (1)判断电话号码格式


                            应用场景:判断用户输入的电话号码格式是否正确


                            电话号码格式:1开头,后面跟10位数字


                              let str = "12356456132"  //str为用户输入的电话号码let re = /^1\d{10}$/     if(re.test(str) !== true) {  console.log('电话号码格式不正确')}else {  console.log('电话号码格式正确')}


                              (2)判断邮箱格式


                              应用场景:判断用户输入的邮箱格式是否正确


                              邮箱格式:第一部分@第二部分,第一部分由字母、数字 和 短横线 - 组成,第二部分由(字母、数字、短横线 - ).cn.com…… 组成


                                let str = "561325647@qq.com"    //用户输入的邮箱let re = /^[\w-\.]+@(\w-?)+(\.\w{2,})+$/if(re.test(str) !== true) {  console.log('邮箱格式不正确')}else {  console.log('邮箱格式正确')}

                                (3)判断昵称格式


                                应用场景:判断用户输入的昵称是否符合规定格式


                                昵称格式:昵称由字母、数字、下划线组成,必须由字母开头,长度为4-16位


                                  let str = "Lpyexplore233"     //用户输入的昵称let re = /^[a-zA-Z][\w_]{3,15}$/if(re.test(str) !== true) {  console.log('昵称格式不正确')}else {  console.log('昵称格式正确')}


                                  结束语


                                  JavaScript的正则表达式系列文章就到这里结束了,希望对大家有所帮助。

                                  相关文章
                                  |
                                  3月前
                                  |
                                  存储 安全 JavaScript
                                  云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
                                  【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
                                  |
                                  10天前
                                  |
                                  前端开发 JavaScript UED
                                  探索JavaScript中的异步编程模式
                                  【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
                                  |
                                  24天前
                                  |
                                  JavaScript 前端开发
                                  js教程——函数
                                  js教程——函数
                                  21 4
                                  |
                                  26天前
                                  |
                                  JavaScript 前端开发 API
                                  探索Node.js中的异步编程模式
                                  【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
                                  |
                                  29天前
                                  |
                                  JavaScript 前端开发 调度
                                  探索Node.js中的异步编程模式
                                  在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!
                                  |
                                  28天前
                                  |
                                  JavaScript 前端开发
                                  电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
                                  电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
                                  70 1
                                  |
                                  1月前
                                  |
                                  JavaScript 前端开发 开发者
                                  探索Node.js中的异步编程模式
                                  【9月更文挑战第33天】在JavaScript的后端领域,Node.js凭借其非阻塞I/O和事件驱动的特性,成为高性能应用的首选平台。本文将深入浅出地探讨Node.js中异步编程的核心概念、Promise对象、Async/Await语法以及它们如何优化后端开发的效率和性能。
                                  25 7
                                  |
                                  2月前
                                  |
                                  JavaScript 前端开发 开发者
                                  探索Node.js中的异步编程模式
                                  【9月更文挑战第15天】在Node.js的世界中,“一切皆异步”不仅是一句口号,更是其设计哲学的核心。本文将带你深入理解Node.js中异步编程的几种主要模式,包括经典的回调函数、强大的Promise对象、以及简洁的async/await结构。我们将通过实例代码来展示每种模式的使用方式和优缺点,帮助你更好地掌握Node.js异步编程的精髓。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启示和思考。让我们一起开启Node.js异步编程的探索之旅吧!
                                  |
                                  29天前
                                  |
                                  JavaScript 前端开发 Java
                                  Node.js 教程
                                  10月更文挑战第1天
                                  37 0
                                  |
                                  2月前
                                  |
                                  自然语言处理 JavaScript 前端开发
                                  JavaScript 正则表达式
                                  JavaScript 正则表达式
                                  15 3