• 正则表达式

    一、正则表达式

    1、介绍

    • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
    • 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

    在这里插入图片描述

    • 请在上图中找出【戴帽子和眼镜的男人】

    • 戴帽子、戴眼镜、男人都是描述信息，通过这些信息能够在人群中查找到确定的某个人，那么这些用于查找的描述信息编写一个模式，对应到计算机中就是所谓的正则表达式。

    • 正则表达式在 JavaScript中的使用场景：
       例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
       比如用户名: /^[a-z0-9_-]{3,16}$/
       过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
      在这里插入图片描述

    2、语法

    • 我们想要查找是否有戴眼镜的人, 怎么做呢？
      1）定义规则： 戴眼镜的
      2）根据规则去查找：找到则返回

    • 正则同样道理，我们分为两步：
      1）定义规则
      2）查找

    定义正则表达式语法

    在这里插入图片描述
    其中 / / 是正则表达式字面量，如let reg = /前端/

    判断是否有符合规则的字符串–test()

    test() 方法 用来查看正则表达式与指定的字符串是否匹配

    • 语法：
      在这里插入图片描述
      在这里插入图片描述
      如果正则表达式与指定的字符串匹配 ，返回true，否则false

    检索（查找）符合规则的字符串–exec()

    exec() 方法 在一个指定字符串中执行一个搜索匹配

    • 语法：
      在这里插入图片描述
      在这里插入图片描述
      如果匹配成功，exec() 方法返回一个数组，否则返回null

    test 和 exec 区别
    test方法 用于判断是否有符合规则的字符串，返回的是布尔值 找到返回true，否则false
     exec方法用于检索（查找）符合规则的字符串，找到返回数组，否则为null

    3、元字符

    • 普通字符:
      大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
      也就是说普通字符只能够匹配字符串中与它们相同的字符。
    • 元字符(特殊字符）
      是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
       比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm……
       但是换成元字符写法： [a-z]
    • 参考文档：
       MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
       正则测试工具: http://tool.oschina.net/regex

    为了方便记忆和学习，我们对众多的元字符进行了分类：
    边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
    量词 （表示重复次数）
    字符类 （比如 \d 表示 0~9）

    （1）边界符

    正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
    在这里插入图片描述
    如果 ^ 和 $ 在一起，表示必须是精确匹配
    在这里插入图片描述

    （2） 量词

    量词用来 设定某个模式出现的次数
    在这里插入图片描述
    注意： 逗号左右两侧千万不要出现空格
    在这里插入图片描述
    在这里插入图片描述

    （3）字符类

    (1) [ ] 匹配字符集合

    • 后面的字符串只要包含 abc 中任意一个字符，都返回 true 。
      在这里插入图片描述

    (2) [ ] 里面加上 - 连字符

    • 使用连字符 - 表示一个范围
      在这里插入图片描述
      比如：
       [a-z] 表示 a 到 z 26个英文字母都可以
       [a-zA-Z] 表示大小写都可以
       [0-9] 表示 0~9 的数字都可以
      在这里插入图片描述

    {4, } 是针对 [0-9] 的

    (3) [ ] 里面加上 ^ 取反符号

    比如：
    [^a-z] 匹配除了小写字母以外的字符
    注意要写到中括号里面

    (4) . 匹配除换行符之外的任何单个字符

    (5) 预定义：指的是某些常见模式的简写方式
    在这里插入图片描述
    2019-04-07

    案例–用户名验证案例

    需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
    分析：
    ①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
    ②：当表单失去焦点就开始验证.
    ③：如果符合正则规范, 则让后面的span标签添加 right 类.
    ④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <input type="text">
    <span>span>
    <script>
        // l需求：用户名要求用户英文字母, 数字, 下划线或者短横线组成，并且用户名长度为 6~16位
        // 分析：
        // ①：首先准备好这种正则表达式模式 /^ [a - zA - Z0 - 9 - _]{ 6, 16 } $ /
        // ②：当表单失去焦点就开始验证. 
        // ③：如果符合正则规范, 则让后面的span标签添加 right 类.
        // ④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.
             let txt = document.querySelector('input')
             let span = document.querySelector('span')
             txt.addEventListener('blur',function(){
                 if (/^[a-zA-Z0-9-_]{6,16}$/.test(txt.value)){
                     span.innerHTML = '输入正确'
                     span.style.color = 'green'
                 }
                 else{
                     span.innerHTML = '格式错误'
                     span.style.color = 'red'
                 }
             })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    4、 修饰符

    • 修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
      语法：
      在这里插入图片描述
      i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
      g 是单词 global 的缩写，匹配所有满足正则表达式的结果
      在这里插入图片描述

    • 替换 replace 替换
      语法：
      在这里插入图片描述

    案例–过滤敏感字

    需求：要求用户不能输入敏感字
    比如，pink老师上课很有**

    分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，换为**
③：要全局替换使用修饰符g

    • 1
    • 2
    • 3
    • 4
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <textarea name="" id="" cols="30" rows="10">textarea>
    <button>按钮button>
    <div>div>
    <script>
        let text = document.querySelector('textarea')
        let btn = document.querySelector('button')
        let div = document.querySelector('div')
        btn.addEventListener('click',function(){
            div.innerHTML = text.value.replace(/激情|基情/g,'**')
        })
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    二、正则案例–小兔鲜页面注册(在小兔鲜儿中，register.html )

    在这里插入图片描述

    需求①： 发送验证码
用户点击之后，显示 05秒后重新获取
时间到了，自动改为 重新获取

需求②： 用户名验证（注意封装函数 verifyxxx）
正则 /^[a-zA-Z0-9-_]{6,10}$/
如果不符合要求，则出现提示信息 并 return false 
否则 则返回return true 
之所以返回 布尔值，是为了 最后的提交按钮做准备

需求③： 手机号验证
正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
其余同上

需求④： 验证码验证
正则 /^\d{6}$/
其余同上

需求⑤： 密码验证
正则 /^[a-zA-Z0-9-_]{6,20}$/
其余同上

需求⑥： 再次密码验证
如果本次密码不等于上面输入的密码则返回错误信息
其余同上

需求⑦： 我同意模块
添加类 .icon-queren2 则是默认选中样式

需求⑧： 提交按钮模块
使用 submit 提交事件
如果上面的每个模块，返回的是 false 则阻止提交
如果没有勾选同意协议，则提示 需要勾选

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    三、综合案例

    1、小兔鲜登录页面(在小兔鲜儿中，login.html )

    需求：

    1. 登录按钮点击的时候，需要先判断
       如果没有勾选同意，则提示要勾选
       如果勾选协议，则记住用户名和密码
       登录成功则跳转到首页
      注意，登录按钮需要先阻止默认行为
    2. 打开页面时候，如果本地存储有数据， 则自动记录显示用户名和密码，
      并勾选复选框

    在这里插入图片描述

    2、小兔鲜首页页面(在小兔鲜儿中，index.html )

    需求1：
    如果是移动端打开，则跳转到移动端页面
    需求2：
    如果本地存储有数据，则 显示 你好 xxxx
    否则 显示 请跳转到注册页面

    在这里插入图片描述

  • 相关阅读:
    C- ssize_t & size_t
    第六十章 符号概览
    vue中使用video.js，且可以截图、录制和下载视频
    Java第12章-Iterator接口、Map接口、Collections类
    springBoot与Vue共同搭建webSocket环境
    Window系统安装Nacos
    网站推荐 | 那些小众却精美的网站
    Linux Shell相关记笔记
    数据结构----顺序栈的操作
    合宙Air724UG LuatOS-Air LVGL API控件-滑动条 (Slider)
  • 原文地址：https://blog.csdn.net/qq_40832034/article/details/126043219