1. 什么是正则表达式

  • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象
  • 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
  • 请在图中找出【戴帽子和眼镜的男人】 image.png
  • 戴帽子、戴眼镜、男人都是描述信息，通过这些信息能够在人群中查找到确定的某个人，那么这些用于查找的描述信息编写一个模式，对应到计算机中就是所谓的正则表达式。
  • 正则表达式在 JavaScript中的使用场景：
    • 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配) 。比如用户名: /^[a-z0-9_-]{3,16}$/
    • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。
    • image.png

      2. 语法

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

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

2.1 定义正则表达式语法

image.png
其中 / / 是正则表达式字面量
比如：

  1. let reg = /前端/

2.2 判断是否有符合规则的字符串

test() 方法 用来查看正则表达式与指定的字符串是否匹配
语法：
image.png
比如：

  1. // 定义正则表达式   reg 里面存的是对象
  2. let reg = /前端/
  3. // 2. 检测是否匹配 test （重点）
  4. let str = '我们大家都在学前端'
  5. console.log(reg.test(str))      // true

如果正则表达式与指定的字符串匹配 ，返回true，否则false

2.3 检索（查找）符合规则的字符串：

exec() 方法 在一个指定字符串中执行一个搜索匹配
语法：
image.png
比如：

  1. // 定义正则表达式   reg 里面存的是对象
  2. let reg = /前端/
  3. // 2. 检测是否匹配 test （重点）
  4. let str = '我们大家都在学前端'
  5. console.log(reg.exec(str))  
  6. // 返回的是数组
  7. // ['前端', index: 7, input: '我们大家都在学前端', groups: undefined]

如果匹配成功，exec() 方法返回一个数组，否则返回null

2.4 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

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

3.1 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
image.png
如果 ^ 和 $ 在一起，表示必须是精确匹配。
image.png

3.2 量词

量词用来 设定某个模式出现的次数
image.png
注意： 逗号左右两侧千万不要出现空格
image.png
image.png
image.png
image.png

3.3 字符类

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

image.png

  • 里面加上 - 连字符
    • 使用连字符 - 表示一个范围
      • image.png
    • 比如：
      • [a-z] 表示 a 到 z 26个英文字母都可以
      • [a-zA-Z] 表示大小写都可以
      • [0-9] 表示 0~9 的数字都可以
    • 举例：
      • image.png
  • 里面加上 ^ 取反符号
    • 比如：
      • [^a-z] 匹配除了小写字母以外的字符
      • 注意要写到中括号里面
  • 字符类 . (点)匹配除换行符之外的任何单个字符
  • 预定义：指的是某些常见模式的简写方式。
    • image.png
    • image.png

案例：用户名验证案例

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

  1. <style>
  2.   span {
  3.     display: inline-block;
  4.     width: 250px;
  5.     height: 30px;
  6.     vertical-align: middle;
  7.     line-height: 30px;
  8.     padding-left: 15px;
  9.   }
  11.   .error {
  12.     color: red;
  13.     background: url(./error1.png) no-repeat left center;
  14.   }
  16.   .right {
  17.     color: green;
  18.     background: url(./right.png) no-repeat left center;
  19.   }
  20. </style>
  1. <input type="text">
  2. <span></span>
  3. <script>
  4.   let input = document.querySelector('input')
  5.   let span = input.nextElementSibling
  6.   input.addEventListener('blur', function () {
  7.     if (/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)) {
  8.       span.className = 'right'
  9.       span.innerHTML = '输入正确'
  10.     } else {
  11.       span.className = 'error'
  12.       span.innerHTML = '只能输入6~16位字符'
  13.     }
  14.   })
  15. </script>

4. 修饰符

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

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

image.png

5. replace 替换

语法：image.png

案例：过滤敏感字

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

  1. <textarea name="" id="" cols="30" rows="10"></textarea>
  2. <button>发布</button>
  3. <div></div>
  4. <script>
  5.   let btn = document.querySelector('button')
  6.   let textarea = document.querySelector('textarea')
  7.   let div = document.querySelector('div')
  8.   btn.addEventListener('click', function () {
  9.     // 过滤用户输入的内容
  10.     div.innerHTML = textarea.value.replace(/激情|基情/g, '**')
  12.     // div.innerHTML = textarea.value
  13.   })
  14. </script>

6. change事件

change事件是当表单里面的值发生变化的时候触发，和 blur 不一样
input 事件 只要输入就会触发
change 事件 是 离开表单时候才触发 并且值要有变化

  1. <input type="text">
  2. <!-- <input type="password"> -->
  3. <script>
  4.   let input = document.querySelector('input')
  5.   input.addEventListener('change', function () {
  6.     console.log(111)
  7.   })
  8. </script>

7. 综合案例

案例：小兔鲜页面注册

image.png
需求①： 发送验证码
用户点击之后，显示 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. 详细代码见源码
  1. <div class="xtx-card">
  2.   <h3>新用户注册</h3>
  3.   <form class="xtx-form">
  4.     <div data-prop="username" class="xtx-form-item">
  5.       <span class="iconfont icon-zhanghao"></span>
  6.       <input name="username" type="text" placeholder="设置用户名称">
  7.       <span class="msg"></span>
  8.     </div>
  9.     <div data-prop="phone" class="xtx-form-item">
  10.       <span class="iconfont icon-shouji"></span>
  11.       <input name="phone" type="text" placeholder="输入手机号码  ">
  12.       <span class="msg"></span>
  13.     </div>
  14.     <div data-prop="code" class="xtx-form-item">
  15.       <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
  16.       <input name="code" type="text" placeholder="短信验证码">
  17.       <span class="msg"></span>
  18.       <a class="code" href="javascript:;">发送验证码</a>
  19.     </div>
  20.     <div data-prop="password" class="xtx-form-item">
  21.       <span class="iconfont icon-suo"></span>
  22.       <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
  23.       <span class="msg"></span>
  24.     </div>
  25.     <div data-prop="confirm" class="xtx-form-item">
  26.       <span class="iconfont icon-suo"></span>
  27.       <input name="confirm" type="password" placeholder="请再次输入上面密码">
  28.       <span class="msg"></span>
  29.     </div>
  30.     <div class="xtx-form-item pl50">
  31.       <i class="iconfont icon-queren"></i>
  32.       已阅读并同意<i>《用户服务协议》</i>
  33.     </div>
  34.     <div class="xtx-form-item">
  35.       <button class="submit">下一步</button>
  36.       <!-- <a class="submit" href="javascript:;">下一步</a> -->
  37.     </div>
  38.   </form>
  39. </div>
  1. <script>
  2.   // (function () {
  3.   //   // 表单验证的模块
  4.   //   let num = 0
  5.   // }());
  7.   // (function () {
  8.   //   // 登录模块
  9.   //   let num = 0
  10.   // }());
  13.   (function () {
  14.   // 需求①： 发送验证码
  15.   // 用户点击之后，显示  05秒后重新获取
  16.   // 时间到了，自动改为 重新获取
  17.   let code = document.querySelector('.code')
  18.   code.addEventListener('click', function () {
  19.     // 倒计时读秒操作
  20.     this.innerHTML = '05秒后重新获取'
  21.     let num = 5
  22.     let timer = setInterval(function () {
  23.       num--
  24.       code.innerHTML = `0${num}秒后重新获取`
  25.       if (num === 0) {
  26.         code.innerHTML = `重新获取`
  27.         // 清除定时器
  28.         clearInterval(timer)
  29.       }
  30.     }, 1000)
  31.     })
  33.   // 需求②： 用户名验证（注意封装函数  verifyxxx）
  34.   // 正则 /^ [a - zA - Z0 - 9 - _]{ 6, 10 } $ /
  35.   // 如果不符合要求，则出现提示信息  并 return false 
  36.   // 否则 则返回return true  
  37.   // 之所以返回 布尔值，是为了 最后的提交按钮做准备
  38.   // [name=username]  css 属性选择器
  39.   let username = document.querySelector('[name=username]')
  40.   // console.log(username)
  41.   // 鼠标离开需要验证， 点击下一步也需要验证，那我们为何不封装一个函数呢？ 
  42.   username.addEventListener('change', verifyUsername)
  43.   // 验证用户名的函数
  44.   function verifyUsername() {
  45.     // console.log(11)
  46.     let span = username.nextElementSibling
  47.     // 开始验证  正则  1. 定义规则  2. 检测  
  48.     let reg = /^[a-zA-Z0-9-_]{6,10}$/
  49.     if (!reg.test(username.value)) {
  50.       // console.log('wrong')
  51.       span.innerHTML = '请输入6~10的字符'
  52.       return false
  53.     }
  54.     // console.log('right')
  55.     span.innerHTML = ''
  56.     return true
  57.   }
  59.   // 需求③： 手机号验证
  60.   // 正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  61.   // 其余同上
  62.   let phone = document.querySelector('[name=phone]')
  63.   phone.addEventListener('change', verifyPhone)
  64.   // 验证手机号的函数
  65.   function verifyPhone() {
  66.     // console.log(11)
  67.     let span = phone.nextElementSibling
  68.     // 开始验证  正则  1. 定义规则  2. 检测  
  69.     let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  70.     if (!reg.test(phone.value)) {
  71.       // console.log('wrong')
  72.       span.innerHTML = '请输入11位的手机号码'
  73.       return false
  74.     }
  75.     // console.log('right')
  76.     span.innerHTML = ''
  77.     return true
  78.   }
  80.   // 需求④： 验证码验证
  81.   // 正则 /^\d{6}$/
  82.   //   其余同上
  83.   let codeInput = document.querySelector('input[name=code]')
  84.   codeInput.addEventListener('change', verifyCode)
  85.   // 验证手机号的函数
  86.   function verifyCode() {
  87.     // console.log(11)
  88.     let span = codeInput.nextElementSibling
  89.     // 开始验证  正则  1. 定义规则  2. 检测  
  90.     let reg = /^\d{6}$/
  91.     if (!reg.test(codeInput.value)) {
  92.       // console.log('wrong')
  93.       span.innerHTML = '请输入6位数字'
  94.       return false
  95.     }
  96.     // console.log('right')
  97.     span.innerHTML = ''
  98.     return true
  99.   }
  101.   // 需求⑤： 密码验证
  102.   // 正则 /^[a-zA-Z0-9-_]{6,20}$/
  103.   //   其余同上
  104.   let pass = document.querySelector('input[name=password]')
  105.   pass.addEventListener('change', verifyPass)
  106.   // 验证手机号的函数
  107.   function verifyPass() {
  108.     // console.log(11)
  109.     let span = pass.nextElementSibling
  110.     // 开始验证  正则  1. 定义规则  2. 检测  
  111.     let reg = /^[a-zA-Z0-9-_]{6,20}$/
  112.     if (!reg.test(pass.value)) {
  113.       // console.log('wrong')
  114.       span.innerHTML = '请输入6~20位密码'
  115.       return false
  116.     }
  117.     // console.log('right')
  118.     span.innerHTML = ''
  119.     return true
  120.   }
  122.   // 需求⑥： 再次密码验证
  123.   // 如果本次密码不等于上面输入的密码则返回错误信息
  124.   // 其余同上
  125.   let confirm = document.querySelector('[name=confirm]')
  126.   confirm.addEventListener('change', verifyConfirm)
  127.   function verifyConfirm() {
  128.     let span = confirm.nextElementSibling
  129.     if (confirm.value !== pass.value) {
  130.       span.innerHTML = '两次密码不一致'
  131.       return false
  132.     }
  133.     // console.log('right')
  134.     span.innerHTML = ''
  135.     return true
  136.   }
  138.   // 需求⑦： 我同意模块
  139.   // 切换类   .icon-queren2  则是默认选中样式
  140.   let icon = document.querySelector('.icon-queren')
  141.   icon.addEventListener('click', function () {
  142.     this.classList.toggle('icon-queren2')
  143.   })
  145.   // 需求⑧： 提交按钮模块
  146.   // 使用 submit 提交事件
  147.   // 如果上面的每个模块，返回的是 false 则 阻止提交
  148.   // 如果没有勾选同意协议，则提示  需要勾选
  149.   // 在提交之前先验证
  150.   let form = document.querySelector('form')
  151.   form.addEventListener('submit', function (e) {
  152.     // alert(11)
  153.     // e.preventDefault()
  154.     // e.preventDefault()
  155.     //  怎么阻止提交  （怎么阻止默认行为   ）
  156.     // 我们如果没有验证成功，不允许提交 阻止提交的行为
  157.     // 这样说明验证不通过
  158.     // verifyUsername() === false
  159.     if (!verifyUsername()) {
  160.       // 阻止提交
  161.       // console.log(111);
  162.       e.preventDefault()
  163.     }
  164.     if (!verifyPhone()) {
  165.       // 阻止提交
  166.       e.preventDefault()
  167.     }
  168.     if (!verifyCode()) {
  169.       // 阻止提交
  170.       e.preventDefault()
  171.     }
  172.     if (!verifyPass()) {
  173.       // 阻止提交
  174.       e.preventDefault()
  175.     }
  176.     if (!verifyConfirm()) {
  177.       // 阻止提交
  178.       e.preventDefault()
  179.     }
  180.     // 勾选模块 必须勾选才能通过
  181.     // classList.add() 添加
  182.     // classList.remove() 移除
  183.     // classList.toggle() 切换
  184.     // classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
  186.     if (!icon.classList.contains('icon-queren2')) {
  187.       alert('请勾选同意协议')
  188.       e.preventDefault()
  189.     }
  190.   })
  191. }());
  193. </script>

案例：小兔鲜登录页面

image.png
需求：

  1. 登录按钮点击的时候，需要先判断
  • 如果没有勾选同意，则提示要勾选
  • 如果勾选协议，则记住用户名和密码
  • 登录成功则跳转到首页

注意，登录按钮需要先阻止默认行为

  1. 打开页面时候，如果本地存储有数据， 则自动记录显示用户名和密码，并勾选复选框
  2. 如果是移动端打开，则跳转到移动端页面

如果本地存储有数据，则 显示 你好 xxxx
否则 显示 请跳转到注册页面

  1.  <form action="">
  2.    <div class="box">
  3.      <div class="tab-nav">
  4.        <a href="javascript:;" class="active">账户登录</a>
  5.        <a href="javascript:;">二维码登录</a>
  6.      </div>
  7.      <div class="tab-pane">
  8.        <div class="link">
  9.          <a href="javascript:;">手机验证码登录</a>
  10.        </div>
  11.        <div class="input">
  12.          <span class="iconfont icon-zhanghao"></span>
  13.          <input required type="text" placeholder="请输入用户名称/手机号码" name="username">
  14.        </div>
  15.        <div class="input">
  16.          <span class="iconfont icon-suo"></span>
  17.          <input required type="password" placeholder="请输入密码" name="password">
  18.        </div>
  19.        <div class="agree">
  20.          <label for="my-checkbox">
  21.            <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
  22.            <span class="iconfont icon-xuanze"></span>
  23.          </label>
  24.          我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
  25.        </div>
  26.        <div class="button clearfix">
  27.          <button type="submit" class="dl">登 录</button>
  28.          <!-- <a class="dl" href="./center.html">登 录</a> -->
  29.          <a class="fl" href="./forget.html">忘记密码？</a>
  30.          <a class="fr" href="./register.html">免费注册</a>
  31.        </div>
  32.      </div>
  33.      <div class="tab-pane" style="display: none;">
  34.        <img class="code" src="../images/code.png" alt="">
  35.      </div>
  36.    </div>
  37. </form>
  1. <script>
  2.   // 需求：
  3.   // 1. 登录按钮点击的时候，需要先判断
  4.   // 如果没有勾选同意，则提示要勾选
  5.   // 如果勾选协议，则记住用户名和密码
  6.   // 登录成功则跳转到首页
  7.   // 注意，登录按钮需要先阻止默认行为
  9. let dl = document.querySelector('.dl')
  10. // 复选框
  11. let remember = document.querySelector('.remember')
  12. let username = document.querySelector('[name=username]')
  13. let password = document.querySelector('[name=password]')
  14. dl.addEventListener('click', function (e) {
  15.   e.preventDefault()
  16.   if (!remember.checked) {
  17.     alert('请勾选协议')
  18.     return
  19.   }
  21.   let obj = {
  22.     username: username.value,
  23.     password: password.value,
  24.   }
  25.   // console.log(obj)
  26.   localStorage.setItem('pink', JSON.stringify(obj))
  27.   // 跳转到新的页面
  28.   location.href = './index.html'
  29. })
  32. // 2. 打开页面时候，如果本地存储有数据， 则自动记录显示用户名和密码，并勾选复选框
  33. let obj = JSON.parse(localStorage.getItem('pink'))
  34. if (obj) {
  35.   username.value = obj.username
  36.   password.value = obj.password
  37.   // 如果有数据则默认勾选
  38.   remember.checked = true
  39. }
  40. </script>