开发者社区> 前端印象> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

指定匹配位置


上一篇我们讲到了分组与引用,本文就从指定匹配位置开始讲。


在正则表达式中,我可以利用某些字符,去指定匹配发生的位置。这些字符我们称之为正则表达式的


字符
含义
^匹配字符串的开头
$匹配字符串的结尾
\b匹配一个单词的边界
\B匹配非单词边界的位置
(?=p)零宽正向先行断言,?=后面的字符都要与p匹配,但不能包括p的那些字符
(?!p)零宽负向先行断言,?!后面的字符不与p匹配


我们来逐个说一下这几个字符的用法:


  • ^ 符号


^ 这个符号是将匹配位置定位到字符串的开头,直接来看一个例子


    /*--------------------------第一种情况--------------------*/
    let pattern = /^javascript/let str = "javascript is fun"
    str.match(pattern)         //返回 ['javascript']
    /*--------------------------第二种情况--------------------*/
    let pattern = /^javascript/let str = "i love javascript"
    str.match(pattern)         //返回 null


    我们匹配的模式是,要以javascript开头的字符串。第一种情况,字符串以 javascript开头,所以能匹配到;第二种情况,javascript不是在开头的位置,而是在末尾的位置,不符合匹配模式,所以匹配失败返回null。


    在前面我们有一个地方还用到了 ^ 这个符号,那就是 [^abc] ,所以一定要注意,当 ^ 放在方括号里,表示的是取反,也就是说不匹配方括号里的任何字符。


    • $ 符号


    $ 这个符号是将匹配位置定位到字符串的末尾,直接来看一个例子


      /*--------------------------第一种情况--------------------*/
      let pattern = /javascript$/let str = "javascript is fun"
      str.match(pattern)         //返回 null
      /*--------------------------第二种情况--------------------*/
      let pattern = /javascript$/let str = "i love javascript"
      str.match(pattern)         //返回 ['javascript']


      我们的匹配模式是,字符串要以javascript结尾。第一种情况,字符串结尾处字符是 fun ,不符合匹配模式,返回null;第二种情况,结尾处字符为javascript,符合匹配模式,所以匹配成功。


      我们可以看一下如果 ^ 符号 和 $ 符号一起使用是什么情况:


        let pattern = /^javascript$/let str = "javascript"
        str.match(pattern)      //返回  ["javascript"]


        当这两个符号一起使用时,匹配模式就变成了匹配整段字符串,并且字符串的内容就是 ^ 与 $ 之间的内容


        • \b


        这个符号的作用是匹配一个单词的边界,我们来看几个例子来理解一下


          /*-------------------------第一种情况----------------------*/
          let pattern = /\bjava/let str = "I love javascript"
          str.match(pattern)         //  返回 ['java'] 匹配成功
          /*-------------------------第二种情况----------------------*/
          let pattern = /\bjava/let str = "javascript is fun"
          str.match(pattern)         //  返回 ['java']   匹配成功
          /*-------------------------第三种情况----------------------*/
          let pattern = /\bjava/let str = "1javascript is fun"
          str.match(pattern)         //  返回 null   匹配失败
          /*-------------------------第四种情况----------------------*/
          let pattern = /java\b/let str = "I am learning java"
          str.match(pattern)         //  返回 ['java']   匹配成功
          /*-------------------------第五种情况----------------------*/
          let pattern = /java\b/let str = "I am learning javascript"
          str.match(pattern)         //  返回 null   匹配失败
          /*-------------------------第六种情况----------------------*/
          let pattern = /\bjava\b/let str = "I think java is fun"
          str.match(pattern)         //  返回 ['java']   匹配成功


          看了上面几个例子,你有没有得出什么规律?


          其实 \b 的作用就是将匹配的点放到一个字符串前面(\b放前面)或后面(\b放后面)的 [^a-zA-Z0-9] 处,也可以理解为 \b 可以替换那些特殊字符,但 \b 不会作为匹配的内容。


          • \B


          \B 则与 \b 相反了, \b 可以替换那些特殊字符,那么\B就是用来替换那些非特殊字符,也就是 [a-zA-Z0-9] 内的字符。


          也来举几个简单的例子吧


            /*-------------------------第一种情况----------------------*/
            let pattern = /java\B/let str = "I love javascript"
            str.match(pattern)         //  返回 ['java'] 匹配成功
            /*-------------------------第二种情况----------------------*/
            let pattern = /java\B/let str = "I love java"
            str.match(pattern)         //  返回 null 匹配失败
            /*-------------------------第三种情况----------------------*/
            let pattern = /\Bjava\B/let str = "I love 1javascript"
            str.match(pattern)         //  返回 ['java'] 匹配成功
            /*-------------------------第四种情况----------------------*/
            let pattern = /\Bjava\B/let str = "I love javascript"
            str.match(pattern)         //  返回 null 匹配失败


            • (?=p)


            (?=p)表示接下来的字符要与p匹配,但p不会作为内容返回


            先来看一个例子


              let pattern = /java(script)?(?=\:)/let str = "java: my favorite language"
              str.match(pattern)       //返回 ["java", undefined]  匹配成功


              该例子的匹配模式:匹配一段字符串为java 然后 script 可以有一个也可以没有,后面必须跟一个 :,才能匹配成功,返回匹配内容,但是匹配内容中不包含 :


              再来看一个类似的例子


                let pattern = /java(script)?(?=\:)/let str = "javascript is my favorite language"
                str.match(pattern)       //返回 null  匹配失败


                该例子匹配失败是因为字符串中的javascript后面没有 :,没有满足 (?=\:)的匹配要求


                • (?!p)


                (?!p)与(?=p)相反,它表示接下来的字符不与p匹配


                我们也来看一个例子


                  let pattern = /java(?!script)/let str = "javascript is my favorite language"
                  str.match(pattern)       //返回 null  匹配失败


                  该例子的匹配模式是:匹配一段字符,只要java后面紧跟着的字符不是script即为匹配成功,同时java后面跟的内容也不会作为内容返回。但这个例子中的 str 里, java后面紧跟着的就是script,所以匹配失败。那么成功的例子就是这样的


                    let pattern = /java(?!script)/let str = "javascr1111 is my favorite language"
                    str.match(pattern)       //返回 ["java"]  匹配成功


                    在该例子中, java 后面跟着的就不是script了,所以匹配成功了。java后面的字符不作为内容返回,所以最后的匹配结果就是 java


                    结束语


                    第三篇对于 JavaScript正则表达式的讲解就先到这里,明天后天会继续更新第四篇,并且我会在之后的文章上放上前几篇的文章链接,方便大家观看,希望大家持续关注,点个关注,不迷路

                    版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

                    相关文章
                    js:jquery-toast-plugin实现消息提示
                    js:jquery-toast-plugin实现消息提示
                    7 0
                    js:copy-to-clipboard实现点击复制
                    js:copy-to-clipboard实现点击复制
                    7 0
                    js:lazysizes.js实现图片懒加载
                    js:lazysizes.js实现图片懒加载
                    10 0
                    JS:crypto-js实现AES加密解密
                    JS:crypto-js实现AES加密解密
                    33 0
                    JS:crypto-js实现AES加密解密
                    JS:crypto-js实现AES加密解密
                    24 0
                    通过JS实现一个带AI的井字棋小游戏
                    用JavaScript做一个井字棋的小游戏玩玩
                    32 0
                    js轮播图实现透明度切换
                    涉及知识点:js、轮播图、透明度、js透明度切换轮播图。
                    17 0
                    js实现python的random.choice
                    js实现python的random.choice
                    10 0
                    美丽的闭包,在js中实现函数重载
                    最近在js的学习中,看到了函数重载的问题,一开始,只看到了实现代码,看着代码冥思苦想了半个小时,总算是理清了其实现的原理,也为其实现的巧妙感到赞叹,也是在自己搞懂原理之后,去网络上搜索了下,才知道,这个实现方法是jQuery作者John Resig在《JavaScript忍者秘籍》中对函数重载的实现...
                    1146 0
                    +关注
                    前端印象
                    作者「零一」,公众号【前端印象】。非科班二本自学前端一年进入字节跳动。擅长用大白话、图文结合的方式讲解晦涩难懂的知识,当前原创文章100+篇,全网100w+阅读,文章收藏量2w+,且是掘金优秀作者、CSDN博客专家。
                    152
                    文章
                    0
                    问答
                    文章排行榜
                    最热
                    最新
                    相关电子书
                    更多
                    低代码开发师(初级)实战教程
                    立即下载
                    阿里巴巴DevOps 最佳实践手册
                    立即下载
                    冬季实战营第三期:MySQL数据库进阶实战
                    立即下载