1. Toy模板网首页
  2. > Toy博客

02_正则表达式的应用

10月前 作者：励志敲烂键盘 分类：Toy博客 阅读(38) 违法举报

这篇具有很好参考价值的文章主要介绍了02_正则表达式的应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本课目标

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

1. 正则表达式概述

  • 官方文档：正则表达式 - JavaScript | MDN

  • 正则表达式在线测试

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文章来源地址https://www.toymoban.com/news/detail-821697.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>

到了这里，关于02_正则表达式的应用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 正则表达式应用场景

    数据验证应该是正则表达式最常见的场景了，经常用于用户的输入是否符合所需的条件。数据验证可确保输入或导入的数据准确、一致，并符合预定义的规则。 验证手机号： 验证邮箱： 验证密码（要求：至少包含一个数字，一个字母，一个特殊字符，长度在8~18之间）： 验

    2024年02月08日
    浏览(45)
  • 前端JavaScript入门-day08-正则表达式

    前端JavaScript入门-day08-正则表达式

    (创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 介绍 语法  元字符  边界符  量词  字符类： 修饰符 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象，通常用

    2024年02月13日
    浏览(61)

  • 关于正则表达式中?=、?!、?＜=、?＜!、?:的理解与应用

    (?=pattern) ：正向先行断言，表示匹配位置后面必须紧跟着满足 pattern 的字符串，但不包括这个字符串在匹配结果中。 (?!pattern) ：负向先行断言，表示匹配位置后面不能紧跟着满足 pattern 的字符串，也不包括这个字符串在匹配结果中。 (?=pattern) ：正向后行断言，表示匹配位置

    2024年02月09日
    浏览(46)

  • 20个Python 正则表达式应用与技巧

    本文分享自华为云社区《Python 正则表达式大揭秘应用与技巧全解析》，作者：柠檬味拥抱。 Python 中的 re 模块是用于处理正则表达式的强大工具。正则表达式是一种用来匹配字符串的模式，它可以在文本中搜索和匹配特定的字符串模式。在本文中，我们将探讨 Python 中 re 模块

    2024年04月12日
    浏览(41)
  • 从编程语言的角度来理解正则表达式

    从编程语言的角度来理解正则表达式

    程序代码是对现实事物处理逻辑的抽象，而正则表达式，则是对复杂的字符匹配程序代码的进一步抽象；也就是说，高度简洁的正则表达式，可以认为其背后所对应的，是字符匹配程序代码，而字符匹配程序代码，背后对应的是字符匹配处理逻辑。 字符匹配处理逻辑，可以抽

    2024年02月09日
    浏览(47)

  • 正则表达式在网页处理中的应用四则

    正则表达式在网页处理中的应用四则 正则表达式（Regular Expression）为字符串模式匹配提供了一种高效、方便的方法。几乎所有高级语言都提供了对正则表达式的支持，或者提供了现成的代码库供调用。本文以ASP环境中常见的处理任务为例，介绍正则表达式的应用技巧。 我们

    2024年02月11日
    浏览(52)

  • XPath 文本匹配：正则表达式的应用与技巧

    2023年07月16日
    浏览(49)
  • Java 基础进阶篇（十八）：正则表达式匹配规则和应用

    Java 基础进阶篇（十八）：正则表达式匹配规则和应用

      正则表达式是对字符串（包括普通字符（例如：a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正

    2024年02月13日
    浏览(56)
  • 【正则表达式上】——03全栈开发——如桃花来

    【正则表达式上】——03全栈开发——如桃花来

    正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特殊字符及这些特定字符的组合，组成一个 “规则字符串” ， 这个“规则字符串”用来表达对字符串的一种 逻辑过滤。 非python独有 python里面是使用re模块来实现的，不需要额外进行安装，是python内置模

    2024年02月02日
    浏览(36)
  • 006集 正则表达式 re 应用实例—python基础入门实例

    006集 正则表达式 re 应用实例—python基础入门实例

    正则表达式指预先定义好一个 “ 字符串模板 ” ，通过这个 “ 字符串模 板” 可以匹配、查找和替换那些匹配 “ 字符串模板 ” 的字符串。 Python的中 re 模块，主要是用来处理正则表达式，还可以利用 re 模块通过正则表达式来进行网页数据的爬取和存储。 正则表达式的英文

    2024年02月01日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包