6、Web API-DAY6 正则&阶段案例

最新推荐文章于 2024-06-12 10:16:35 发布

是柚柚耶

最新推荐文章于 2024-06-12 10:16:35 发布

阅读量69

点赞数

分类专栏： JS 文章标签：前端

本文链接：https://blog.csdn.net/m0_51394252/article/details/131380552

版权

JS 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一、正则表达式

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。
通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
正则表达式在 JavaScript中的使用场景：
例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)
比如用户名: /{3,16}$/
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

总结

1.正则表达式是什么？
是用于匹配字符串中字符组合的模式
2.正则表达式有什么作用？
表单验证（匹配）
过滤敏感词（替换）
字符串中提取我们想要的部分（提取）

1.2 语法

我们想要查找是否有戴眼镜的人, 怎么做呢？
1.定义规则：戴眼镜的
2.根据规则去查找：找到则返回
正则同样道理，我们分为两步：
1.定义规则
2.查找
比如：查找下面文本中是否包含字符串 ‘前端’

	<script>
        const str = '我们在学习前端，希望学习前端能高薪就业'
        // 正则表达式使用：
        // 1. 定义规则
        const reg = /前端/
        // 2. 是否匹配
        // console.log(reg.test(str))  //true
        // 3.exec()
        console.log(reg.exec(str))  //返回数组
    </script>

总结

正则表达式检测查找 test方法和exec方法有什么区别？

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

1.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.3.1 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

如果 ^ 和 $ 在一起，表示必须是精确匹配。

1.3.2 量词

量词用来 设定某个模式出现的次数

注意：** 逗号左右两侧千万不要出现空格**
[1,] ： >=1的意思

	// 2.量词
        // 量词 * 类似 >= 0 次
        console.log(/^哈$/.test('哈')) //true
        console.log(/^哈*$/.test('')) //true
        console.log(/^哈*$/.test('哈哈哈哈哈')) //true
        console.log(/^哈*$/.test('二哈很傻')) //false
        console.log(/^哈*$/.test('哈很傻')) //false
        console.log(/^哈*$/.test('哈很哈')) //false
        console.log('---------------------') 
        // 量词{n} 写几，就必须出现几次
        console.log(/^哈{4}$/.test('哈'))  //false
        console.log(/^哈{4}$/.test('哈哈'))  //false
        console.log(/^哈{4}$/.test('哈哈哈'))  //false
        console.log(/^哈{4}$/.test('哈哈哈哈'))  //true
        console.log(/^哈{4}$/.test('哈哈哈哈哈哈哈哈哈'))  //false
        console.log('---------------------')
        // 量词{n,} 重复n次或更多次
        console.log(/^哈{4,}$/.test('哈'))  //false
        console.log(/^哈{4,}$/.test('哈哈'))  //false
        console.log(/^哈{4,}$/.test('哈哈哈'))  //false
        console.log(/^哈{4,}$/.test('哈哈哈哈'))  //true
        console.log(/^哈{4,}$/.test('哈哈哈哈哈哈哈哈哈'))  //true
        console.log('---------------------')
        // 量词{n,m} 逗号左右两侧千万不能有空格
        console.log(/^哈{4,6}$/.test('哈哈哈'))  //false
        console.log(/^哈{4,6}$/.test('哈哈哈哈'))  //true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))  //true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))  //true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈哈哈'))  //false

1.3.3 字符类：

[ ] 匹配字符集合
后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

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

使用连字符 - 表示一个范围
比如：
[a-z] 表示 a 到 z 26个英文字母都可以
[a-zA-Z] 表示大小写都可以
[0-9] 表示 0~9 的数字都可以
认识下：

// 字符类 [a-z] 只选一个
        console.log(/^[A-Z]$/.test('p'))  //false
        console.log(/^[A-Z]$/.test('P'))  //true
        console.log(/^[a-zA-Z0-9]$/.test('P'))  //true

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

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

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

1.3.4 用户名验证案例

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

<style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        const reg = /^[a-zA-Z0-9-_]{6,16}$/
        const input = document.querySelector('input')
        const span = input.nextElementSibling
        input.addEventListener('blur', function(){
            // console.log(reg.test(this.value)) 
            if (reg.test(this.value)) {
                span.innerHTML = '输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '请输入6~16位的英文、数字、下划线'
                span.className = 'error'
            }
        })
    </script>
</body>

1.3.5 预定义

预定义：指的是某些常见模式的简写方式。

1.4 修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
g 是单词 global 的缩写，匹配所有满足正则表达式的结果

替换 replace 替换
语法：

<script>
        console.log(/^java$/.test('java'))  //true
        console.log(/^java$/.test('JAVA'))  //false
        console.log(/^java$/i.test('JAVA'))  //true
        const str = 'java是一门编程语言，学完JAVA工资很高'
        // 只能替换一个，所以加g全局替换
        const re = str.replace(/java/ig,'前端')
        // 正则中'||'或是'|'
        // const re = str.replace(/java|JAVA/g,'前端')
        console.log(re)
    </script>

案例：过滤敏感字

需求：要求用户不能输入敏感字
比如，pink老师上课很有**
分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，进行**
③：要全局替换使用修饰符 g

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <div></div>
    <script>
        const tx = document.querySelector('textarea')
        const btn = document.querySelector('button')
        const div = document.querySelector('div')
        btn.addEventListener('click', function(){
            // console.log(tx.value)
            div.innerHTML = tx.value.replace(/激情|基情/g, '**') 
            tx.value = ''        
        })
    </script>
</body>

1.5 change事件

<body>
    <input type="text">
    <script>
        // change 内容发生了变化
        const input = document.querySelector('input')
        input.addEventListener('change', function(){
            console.log(111)
        })
    </script>
</body>

二、综合案例

分析业务模块：
①：发送验证码模块
②：各个表单验证模块
③：勾选已经阅读同意模块
④：下一步验证全部模块
只要上面有一个input验证不通过就不同意提交

需求①：发送验证码
用户点击之后，显示 05秒后重新获取
时间到了，自动改为重新获取
需求②：用户名验证（注意封装函数 verifyxxx） , 失去焦点触发这个函数
正则 /^[a-zA-Z0-9-_]{6,10}$
如果不符合要求，则出现提示信息并 return false 中断程序
否则则返回return true
之所以返回布尔值，是为了最后的提交按钮做准备
侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发（类似京东效果）
需求③：手机号验证
正则: /^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 则是默认选中样式可以使用 toggle切换类
需求⑧：表单提交模块
使用 submit 提交事件
如果没有勾选同意协议，则提示需要勾选
classList.contains() 看看有没有包含某个类，如果有则返回true，没有则返回false
如果上面input表单只要有模块，返回的是 false 则阻止提交

	<script>
    const code = document.querySelector('.code')
    let flag = true  //通过一个变量来控制  节流阀
    code.addEventListener('click', function(){
      if (flag) {
        flag = false
        let i = 5
        // 点击完毕之后立马触发
        code.innerHTML = `0${i}秒后重新获取`
        let timerId = setInterval(function(){
          i --
          code.innerHTML = `0${i}秒后重新获取`
          if ( i === 0){
            // 清除定时器
            clearInterval(timerId)
            // 到时间了，可以开启flag
            flag = true
            // 重新获取
            code.innerHTML = `重新获取`
          }
        },1000)
      }
      
    })

    // 2.验证用户名
    // 2.1 获取用户名表单
    const username = document.querySelector('[name = username]')
    // 2.2 使用change事件 值发生变化的时候
    username.addEventListener('change', verifyName)
    // 2.3 封装verifyName函数
    function verifyName() {
      // console.log(11)
      const span = username.nextElementSibling
      // 2.4 定规则 用户名
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      if(!reg.test(username.value)) {
        span.innerHTML = '输入不合法，请输入6~10位'
        return false
      }
      // 2.5 合法的
      span.innerHTML = ''
      return true
    }

    // 3.验证手机号
    // 2.1 获取手机表单
    const phone = document.querySelector('[name = phone]')
    // 2.2 使用change事件 值发生变化的时候
    phone.addEventListener('change', verifyPhone)
    // 2.3 封装verifyName函数
    function verifyPhone() {
      // console.log(11)
      const span = phone.nextElementSibling
      // 2.4 定规则 用户名
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      if(!reg.test(phone.value)) {
        span.innerHTML = '输入不合法，请输入11位的手机号'
        return false
      }
      // 2.5 合法的
      span.innerHTML = ''
      return true
    }

    // 4.验证的是验证码
    // 2.1 获取手机表单
    const codeInput = document.querySelector('[name = code]')
    // 2.2 使用change事件 值发生变化的时候
    codeInput.addEventListener('change', verifyCode)
    // 2.3 封装verifyName函数
    function verifyCode() {
      // console.log(11)
      const span = codeInput.nextElementSibling
      // 2.4 定规则 验证码
      const reg = /^\d{6}$/
      if(!reg.test(codeInput.value)) {
        span.innerHTML = '输入不合法，请输入6位数字'
        return false
      }
      // 2.5 合法的
      span.innerHTML = ''
      return true
    }

    // 4.验证的是验证码
    // 2.1 获取手机表单
    const password = document.querySelector('[name = password]')
    // 2.2 使用change事件 值发生变化的时候
    password.addEventListener('change', verifyPwd)
    // 2.3 封装verifyName函数
    function verifyPwd() {
      // console.log(11)
      const span = password.nextElementSibling
      // 2.4 定规则 验证码
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      if(!reg.test(password.value)) {
        span.innerHTML = '输入不合法'
        return false
      }
      // 2.5 合法的
      span.innerHTML = ''
      return true
    }

    // 5.验证的是密码的再次确认
    // 2.1 获取手机表单
    const confirm = document.querySelector('[name = confirm]')
    // 2.2 使用change事件 值发生变化的时候
    confirm.addEventListener('change', verifyConfirm)
    // 2.3 封装verifyName函数
    function verifyConfirm() {
      // console.log(11)
      const span = confirm.nextElementSibling
      if(confirm.value !== password.value) {
        span.innerHTML = '两次密码输入不一致'
        return false
      }
      // 2.5 合法的
      span.innerHTML = ''
      return true
    }

    // 7.我同意模块
    const queren = document.querySelector('.icon-queren')
    queren.addEventListener('click', function(){
      // 切换类 原来有的就删掉，原来没有就添加
      this.classList.toggle('icon-queren2')
    })

    // 8.提交模块
    const form = document.querySelector('form')
    form.addEventListener('submit', function(e){
      // 判断是否勾选我同意模块，如果有icon-queren2说明就勾选了，否则没勾选
      if(!queren.classList.contains('icon-queren2')){
        alert('请勾选同意协议')
        e.preventDefault()
      }
      // 依此判断上面的每个框框 是否通过，只要有一个没有通过就阻止
      // console.log(verifyName())
      if (!verifyName()) e.preventDefault()
      if (!verifyPhone()) e.preventDefault()
      if (!verifyCode()) e.preventDefault()
      if (!verifyPwd()) e.preventDefault()
      if (!verifyConfirm()) e.preventDefault()
    })
  </script>

三、阶段案例

是柚柚耶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、Web API-DAY6 正则&阶段案例

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。正则表达式在 JavaScript中的使用场景：例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配比如用户名: /{3,16}$/过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。1.正则表达式是什么？
复制链接

扫一扫