JavaScript应用（day06:正则表达式）

最新推荐文章于 2024-08-23 20:55:13 发布

我是如此相信ᯤ⁶⁶ᴳ

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量505

点赞数 11

分类专栏： JavaScript应用文章标签： javascript 正则表达式前端

本文链接：https://blog.csdn.net/weixin_51591826/article/details/135054174

版权

JavaScript应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、正则表达式

1.介绍

用于匹配字符串中字符组合的模式

使用场景

验证表单、过滤敏感词、提取特定部分等

总结

2.语法

1.第一种方法

1.1定义正则表达式规则

1.2.1是否有符合规则的字符串（test()方法）

1.2.2查找符合规则的字符串（exec()方法）

总结

3.元字符

元字符是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能

总结

3.1边界符

表示位置，开头和结尾，必须用什么开头，用什么结尾

如果^和$在一起，表示必须是精确匹配，例如：/^哈$/.test('哈哈') //flase

3.2量词

表示重复次数

+表示重复至少1次

？表示重复0次或1次

*表示重复0次或多次

{m,n}表示重复m到n次

3.3字符符

比如\d表示0~9

3.3.1[]匹配字符集合

包含[ ]里面任意一个，都返回true

[ ]里面加上-连字符，表示范围

[ ]里面加上^取反符号

3.3.2 .匹配除换行符之外的任何单个字符

总结

案例（用户名验证）

//   获取元素
const input = document.querySelector('input')
const span = document.querySelector('span')
//   给input表单绑定失去焦点事件
input.addEventListener('blur', function () {
  // 定义正则规则
  const regx = /^[a-zA-Z0-9-_]{6,16}$/
  let flag = regx.test(this.value)
  // 如果符合正则规范，则让后面的span标签添加right类
  // 如果不符合正则规范，则让后面的span标签添加wrong类
  if (flag) {
    span.classList.add('right')
    span.classList.remove('error')
    span.innerHTML = '输入成功'
  } else {
    span.classList.add('error')
    span.classList.remove('right')
    span.innerHTML = '不符合正则规范,请重新输入'
  }

3.3.3某些常见模式的简写方式

3.修饰符

i和g

replace替换

案例（过滤敏感词）

   const textarea = document.querySelector('textarea')
      const button = document.querySelector('button')
      const div = document.querySelector('div')
      button.addEventListener('click', function () {
        let filterStr = textarea.value.replace(/激情|基情/g, '**')
        div.innerHTML = filterStr
        textarea.value = ''
      })

二、综合案例(小兔鲜页面注册)

      // 获取元素
      const code = document.querySelector('.code')
      const username = document.querySelector('input[name=username]')
      const userPhone = document.querySelector('input[name=phone]')
      const userCode = document.querySelector('input[name=code]')
      const userPwd = document.querySelector('input[name=password]')
      const confirm = document.querySelector('input[name=confirm]')
      // 发送验证码功能
      let flag = true
      code.addEventListener('click', function () {
        if (flag) {
          flag = false
          let time = 5
          code.innerHTML = `0${time}秒后重新获取`
          // 用户点击之后，显示05秒后重新获取
          let timeId = setInterval(function () {
            time--
            if (time === 0) {
              clearInterval(timeId)
              code.innerHTML = '重新获取'
              flag = true
              return
            }
            code.innerHTML = `0${time}秒后重新获取`
          }, 1000)
        }
      })

      // 用户名验证
      // 封装函数
      function verifyName(str) {
        // 定义正则
        const reg = /^[a-zA-Z0-9-_]{6,10}$/
        if (reg.test(str)) {
          return true
        } else {
          return false
        }
      }
      username.addEventListener('change', function () {
        if (verifyName(this.value)) {
          this.nextElementSibling.innerHTML = ''
          return true
        } else {
          this.nextElementSibling.innerHTML = '昵称长度为6到10个字符'
          return false
        }
      })
      // 手机号验证
      function verifyPhone(str) {
        // 定义正则
        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(str)) {
          return true
        } else {
          return false
        }
      }
      userPhone.addEventListener('change', function () {
        if (verifyPhone(this.value)) {
          this.nextElementSibling.innerHTML = ''
          return true
        } else {
          this.nextElementSibling.innerHTML = '请输入正确的手机号'
          return false
        }
      })
      // 验证码验证
      function verifyCode(str) {
        // 定义正则
        const reg = /^\d{6}$/
        if (reg.test(str)) {
          return true
        } else {
          return false
        }
      }
      userCode.addEventListener('change', function () {
        if (verifyCode(this.value)) {
          this.nextElementSibling.innerHTML = ''
          return true
        } else {
          this.nextElementSibling.innerHTML = '请输入正确的验证码'
          return false
        }
      })
      // 密码验证
      function verifyPwd(str) {
        // 定义正则
        const reg = /^[a-zA-Z0-9-_]{6,20}$/
        if (reg.test(str)) {
          return true
        } else {
          return false
        }
      }
      userPwd.addEventListener('change', function () {
        if (verifyPwd(this.value)) {
          this.nextElementSibling.innerHTML = ''
          return true
        } else {
          this.nextElementSibling.innerHTML = '设置6至20位字母、数字和符号组合'
          return false
        }
      })
      // 再次确认密码
      function verifyConfirmPwd(str) {
        if (str == userPwd.value) {
          return true
        } else {
          return false
        }
      }
      confirm.addEventListener('change', function () {
        if (verifyConfirmPwd(this.value)) {
          this.nextElementSibling.innerHTML = ''
          return true
        } else {
          this.nextElementSibling.innerHTML = '两次密码不一致，请重新输入'
          return false
        }
      })
      // 我同意模块
      const iconQueren = document.querySelector('.icon-queren')
      iconQueren.addEventListener('click', function () {
        this.classList.toggle('icon-queren2')
      })
      // 表单提交模块
      const form = document.querySelector('form')
      form.addEventListener('submit', function (e) {
        if (!iconQueren.classList.contains('icon-queren2')) {
          alert('请勾选同意协议')
          e.preventDefault()
        }
        if (
          !(
            verifyName(username.value) &&
            verifyPhone(userPhone.value) &&
            verifyCode(userCode.value) &&
            verifyPwd(userPwd.value) &&
            verifyConfirmPwd(confirm.value)
          )
        ) {
          alert('请检查输入的数据')
          e.preventDefault()
        }
      })

三、阶段案例(小兔鲜登录页面)

   // 实现tab栏切换
    const tab_nav=document.querySelector(".tab-nav")
    const tab_panes=document.querySelectorAll(".tab-pane")
    // 使用事件委托
      tab_nav.addEventListener("click",function(e){
        if(e.target.tagName==="A"){
      // 排他思想
          document.querySelector(".active").classList.remove("active")
          e.target.classList.add("active")
        }
        for(let i=0;i<tab_panes.length;i++){
          tab_panes[i].style.display="none"
        }
        tab_panes[e.target.dataset.id].style.display="block"
      })
      // 点击登录页面
      const form=document.querySelector("form")
      const remember=document.querySelector(".remember")
      const username=document.querySelector("[name=username]")
      form.addEventListener("submit",function(e){
        e.preventDefault()
        // 判断是否勾选协议
        if(!remember.checked){
           return alert("记得勾选条例")
        }
        // 把用户名记录到本地存储中
        localStorage.setItem("xtx-uname",username.value)
          location.href="index.html"
      })

阶段案例(小兔鲜首页页面)

      // 获取元素
      const li_1 = document.querySelector(
        '.xtx_topnav .xtx_navs li:nth-child(1) a'
      )
      const li_2 = document.querySelector(
        '.xtx_topnav .xtx_navs li:nth-child(2) a'
      )
      // 渲染函数
      function render() {
        const uname = localStorage.getItem('xtx-uname')
        if (uname) {
          li_1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user"> ${uname}</i></a>`
          li_2.innerHTML = `<a href="javascript:;">退出登录</a>`
        } else {
          li_1.innerHTML = `<a href="./login.html">请先登录</a>`
          li_2.innerHTML = `<a href="./register.html">免费注册</a>`
        }
      }
      render()
      // 退出登录
      li_2.addEventListener('click', function () {
        localStorage.removeItem('xtx-uname')
        render()
      })