02_正则表达式的应用

  • 开发
  • 34

本课目标

  • 理解正则表达式概述
  • 掌握Js的正则对象Regexp
  • 掌握正则表达式的常见用法
  • 完成页面注册的手机号码校验

1. 正则表达式概述

1.1 正则表达式的定义

  • 介绍：正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。

  • 正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

  • 总结：就是用来做规则判断的（比如我们给一个规则，然后判断用户输入的字符串是否符合该规则）。

  • 如何使用正则表达式：

方法 描述
exec 一个在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）。
test 一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。
match 一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。
matchAll 一个在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）。
search 一个在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回 -1。
replace 一个在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。

2. 正则表达式在js中的使用

2.1 正则表达式的基本用法

  • 课堂案例：01.如何定义正则表达式.html

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            RegExp:正则表达式对象
            /abc/：正则表达式需要包裹在  / 中间   /
         */

         //定义的规则：判断一个字符串是否包含  abc

         //方式一：使用 new 关键字创建
        const regExObj = new RegExp(/abc/);

        // console.log(regExObj)
        // console.dir(regExObj)


        //方式二：基于字面量的方式定义，和通过new关键字的方式是一样的
        const regExObj2 = /aa/;

        //	一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。
        //  regexObj.test(str)

        console.log(regExObj.test("abaa"))      //false
        console.log(regExObj.test("abc"))       //true
        console.log(regExObj.test("abcd"))      //true
        console.log(regExObj.test("dabc"))      //true

        console.log(regExObj2.test("aa"))       //true
        console.log(regExObj2.test("bba"))      //false
        console.log(regExObj2.test("aabbcc"))   //true
    </script>
</body>
</html>

2.2 正则表达式中的边界符

  • 课堂案例：02.边界符与开始和结束的理解.html

  • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
            /abc/： / 表示的是边界符，有转义的效果
         */
        const rg = /a/;

        /* 
            开始符号与结束符号的限制
            需求：以xxx开始，以xxx结束

            ^ 匹配输入的开始
            $ 匹配输入的结束
         */


        const rg1 = /^a/
        console.log(rg1.test("abc"))
        console.log(rg1.test("aabc"))
        console.log(rg1.test("bcd"))

        console.log("------")

        const rg2 = /^abab$/         //只能以a开始，以b结束，中间只能是ba
        console.log(rg2.test("abc"))
        console.log(rg2.test("aabc"))
        console.log(rg2.test("abcccab"))
        console.log(rg2.test("aab"))

        console.log("---------")

        const rg3 = /^a.b$/         //  .  可以匹配任意字符 除换行符
        console.log(rg3.test("abbb"))
        console.log(rg3.test("aabc"))
        console.log(rg3.test("aba"))
        console.log(rg3.test("acb"))
    </script>
</body>

</html>

2.3 正则表达式中的中括号

  • 课堂案例：03.字符集合之中括号.html

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            /[abc]/:表示只要匹配 [] 中的任意一个就可以了
         */
        const rg = /[abc]/;
        console.log(rg.test('abcaa'))       //true
        console.log(rg.test("aaacccbbabc"))     //true
        console.log(rg.test("a xbc"))     //true
        console.log(rg.test("a"))     //true
        console.log(rg.test("f"))     //flase

        console.log("-------------")
        /* 
            从开始到结束只能够包含abc当中的其中一个
         */
         const rg2 = /^[abc]$/
         console.log(rg2.test("abc"))       //false   开始和结束只能是其中的一个，不能是全部
         console.log(rg2.test("a"))
         console.log(rg2.test("b"))
         console.log(rg2.test("c"))
         console.log(rg2.test("ajjja"))
console.log("-----------")
         /* 
            匹配：a-z  -> 简写[a-z]
          */

          const rg3 = /^[a-z]$/
          console.log(rg3.test("a"))
          console.log(rg3.test("abs"))
          console.log(rg3.test("c"))
          console.log(rg3.test("aa"))
console.log("-----------")
          /* 
                /w  匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。
                /d  匹配一个数字。等价于 [0-9]。
                /W  匹配一个非单字字符。等价于 [^A-Za-z0-9_]。
                \D  匹配一个非数字字符。等价于 [^0-9]。
                总结：如果在[] 中出现 ^ ，表示取反的意思，出现在[]外面和里面是两个意思
           */

        //    const rg4 = /^[a-zA-Z0-9_]$/
        //    const rg4 = /^[\w]$/
           const rg4 = /^[\W]$/
           console.log(rg4.test("a"))
          console.log(rg4.test("_"))
          console.log(rg4.test("E"))
          console.log(rg4.test("0"))
          console.log(rg4.test("-"))
           
    </script>
</body>
</html>

2.4 特殊字符与大括号

  • 课堂案例：04.特殊字符与大括号.html

  • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>


    <script>
        /* 
            特殊字符：
                *： 匹配前一个表达式 0 次或多次。等价于 {0,}。          >= 0
                +:  匹配前面一个表达式 1 次或者多次。等价于 {1,}。      >= 1
                ?:  匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。    0,1
          */
        //   const rg = /^a$/;
        //   const rg = /^a*$/;
        const rg = /bo*/;
        console.log(rg.test("a"))
        console.log(rg.test("aa"))
        console.log(rg.test("A ghost boooooed"))
        console.log(rg.test("A bird warbled"))

        console.log("-----------")
        const rg1 = /a+/
        console.log(rg1.test("candy"))
        console.log(rg1.test("caaaaaaaaaandy"))

        console.log("-----------")
        const rg2 = /e?le?/ // e 可有可无
        console.log(rg2.test("angel")) //el
        console.log(rg2.test("angle")) //l

        console.log("------------------")

        /* 
              {n}:    n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。
              {n,}:   n 是一个正整数，匹配前一个字符至少出现了 n 次。           >=n
              {n,m}:  n 和 m 都是整数。匹配前面的字符至少 n 次，最多 m 次。如果 n 或者 m 的值是 0，这个值被忽略。
         */
        const rg3 = /a{2}/
        console.log(rg3.test("candy")) //false
        console.log(rg3.test("caandy")) //aa

        console.log("------------")
        const rg4 = /a{1,3}/        //满足就true
        console.log(rg4.test("candy")) //a
        console.log(rg4.test("caaaandy")) // 

        console.log("------------")
        const rg5 = /^a{3,10}$/     //必须在范围里是true
        console.log(rg5.test("a")) //
        console.log(rg5.test("aa")) //
        console.log(rg5.test("aaa")) //
        console.log(rg5.test("aaaa")) //
        console.log(rg5.test("aaaaa")) //
        console.log(rg5.test("aaaaaaaaaaa")) // 
    </script>

</body>

</html>

2.5 小括号的使用

  • 课堂案例：05.小括号的使用.html

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            ()：括号里的内容会被当作整体进行匹配
         */

         const rg = /^(abc){2}$/        //abc  作为一个整体出现2次
         console.log(rg.test("abc"))        //false
         console.log(rg.test("abcabc"))     //true
         console.log(rg.test("abca"))       //false
         console.log(rg.test("abcdd"))      //false
         console.log(rg.test("abcabcabc"))  //false
    </script>
</body>
</html>

2.6 课堂案例

  • 课堂案例：06.课堂案例.html

  • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            font-size: 15px;
        }

        .right {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="input1"><span class="msg1">请输入用户名</span><br><br>
    <input type="text" class="input2"><span class="msg2">请输入用户名</span><br><br>
    <input type="text" class="input3"><span class="msg3">请输入邮箱</span>


    <script>
        const input1Obj = document.querySelector(".input1")
        const input2Obj = document.querySelector(".input2")
        const input3Obj = document.querySelector(".input3")

        const msg1Obj = document.querySelector(".msg1")
        const msg2Obj = document.querySelector(".msg2")
        const msg3Obj = document.querySelector(".msg3")
        //验证用户名的正则
        const re1 = /^[\w]{6,10}$/;

        //验证手机号的正则,第一位是1 后面的10位是0-9
        const re2 = /^[1](50|35|39)[\d]{8}$/ //不加上 $ 限制结尾，就是只要超过10的都满足条件

        //验证邮箱的正则
        const re3 = /^[\w]@.com$/
        // const re3 = /^[\w]{3,8}@(qq|163).com$/

        input1Obj.addEventListener("blur", function () {
            //对用户名进行校验
            if (re1.test(this.value)) {
                //满足条件
                msg1Obj.className = 'right'
                msg1Obj.innerHTML = "输入正确"

            } else {
                msg1Obj.className = 'error'
                msg1Obj.innerHTML = "输入错误"
            }
        })

        input2Obj.addEventListener("blur", function () {
            //对手机号进行校验
            if (re2.test(this.value)) {
                //满足条件
                msg2Obj.className = 'right'
                msg2Obj.innerHTML = "输入正确"

            } else {
                msg2Obj.className = 'error'
                msg2Obj.innerHTML = "输入错误"
            }
        })

        input3Obj.addEventListener("blur", function () {
            //对手机号进行校验
            if (re3.test(this.value)) {
                //满足条件
                msg3Obj.className = 'right'
                msg3Obj.innerHTML = "输入正确"

            } else {
                msg3Obj.className = 'error'
                msg3Obj.innerHTML = "输入错误"
            }
        })
    </script>
</body>

</html>

3. 扩展加强

  • 课堂案例：07.replace使用正则.html

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    论坛：<div></div>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <script>
        
        /* 

            需求：需要对发布的信息中关键字进行过滤
         */
         const divObj = document.querySelector("div")
         const textareaObj = document.querySelector("textarea")
         const btnObj = document.querySelector("button")
         
         //对发布的信息过滤
         btnObj.addEventListener("click",function(){
             /* 
                g:表示全局替换
                i：忽略大小写
              */
             divObj.innerHTML = textareaObj.value.replace(/卧槽|傻瓜|sb/gi,'**')
         })

         /* 
            需求2：通过正则实现如下需求
                    日期：2022-11-12
                    像输出结果为：12-11-2022
          */

          const re1 = /(\d{4})-(\d{2})-(\d{2})/
          const strDate = "2022-12-31"
          /* 
                分别代表括号内的内容
                $1 =(\d{4}) 
                $2 =(\d{2}) 
                $3 =(\d{2}) 
           */
           //方式一
          const result = strDate.replace(re1,"$3/$2/$1")
        //   const result = strDate.replace(re1,"$3-$2-$1")
        //   const result = strDate.replace(re1,"$3*$2*$1")
          console.log(result)

          //方式二
         const result2 =  strDate.replace(re1,function(){
              return RegExp.$3+"-"+RegExp.$2+"-"+RegExp.$1
          })
          console.log(result2)

          //方式三
          const result3 =  strDate.replace(re1,function(match,year,month,day){
              console.log("match = "+match)         //第一个参数输出原来的数
              console.log("year = "+year)
              console.log("mouth = "+month)
              console.log("day = "+day)
              return day+"-"+month+"-"+year;
          })

          console.log(result3)
    </script>
</body>
</html>

  • 课堂案例：08.match方法.html

  • <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
            match方法:  一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。

         */

        const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
        const regex = /[A-Z]/g;
        const found = paragraph.match(regex);

        console.log(found);
        // Expected output: Array ["T", "I"]
    </script>
</body>

</html>

阅读全部

相关推荐

  1. 02_正则表达式的应用

    2024-01-24 14:02:02       35 阅读

  2. 正则表达式的应用

    2024-01-24 14:02:02       25 阅读

  3. 正则表达式的规则

    2024-01-24 14:02:02       44 阅读

  5. 【正则表达式的妙用】

    2024-01-24 14:02:02       33 阅读

  6. Harmony 正则表达式的写法

    2024-01-24 14:02:02       16 阅读

  7. 正则表达式的常见语法

    2024-01-24 14:02:02       12 阅读

  8. 正则表达式的详解带你认识正则表达式的意义

    2024-01-24 14:02:02       8 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-01-24 14:02:02       18 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-01-24 14:02:02       19 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-01-24 14:02:02       19 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-01-24 14:02:02       20 阅读

热门阅读

  4. Ubuntu 常用命令、docker 常用命令、unzip常用命令、tar常用命令

    2024-01-24 14:02:02       34 阅读

  7. Flowable使用docker中MySQL8，Springboot启动出错

    2024-01-24 14:02:02       35 阅读

  9. el-select选项过多导致页面卡顿，路由跳转卡顿

    2024-01-24 14:02:02       32 阅读

  10. 机器的世界模型与人类的世界模型

    2024-01-24 14:02:02       30 阅读

  13. 【Spring Boot 3】【JPA】枚举类型持久化

    2024-01-24 14:02:02       35 阅读

  14. ES6笔记-symbol

    2024-01-24 14:02:02       31 阅读

  16. 最小生成树 prim + kruskal

    2024-01-24 14:02:02       28 阅读

  17. NLP自然语言处理介绍

    2024-01-24 14:02:02       34 阅读

  20. 2024.1.20 Python学习笔记7：字符串常见处理函数

    2024-01-24 14:02:02       33 阅读

  23. C++中模板的使用

    2024-01-24 14:02:02       36 阅读

  24. GBASE南大通用数据库通过 GBase ADO.NET 接口读取数据

    2024-01-24 14:02:02       27 阅读

  26. Python之list

    2024-01-24 14:02:02       26 阅读

  29. 行内样式css不生效

    2024-01-24 14:02:02       36 阅读