js:正则表达式

正则表达式的语法

定义

检测

检索

元字符

边界符

量词

字符类

表单判断案例

修饰符

过滤敏感词

正则表达式是一种用于匹配和操作文本的强大工具，它是由一系列字符和特殊字符组成的模式，用于描述要匹配的文本字符组合模式

正则表达式是一种通用的模式，在js里一般用作验证表单：

用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文(匹配)

过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。

正则表达式的语法

定义

定义正则表达式的语法，//内部是正则表达式的字面量

const reg=/兔子/

检测

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

const str='我有三只小兔子'
//定义正则表达式
const reg=/兔子/
//是否匹配
console.log(reg.test(str));

匹配上了返回true，没匹配上返回false

reg是正则表达式的对象，test()是reg对象的方法，而定义的正则表达式就相当于一套规则

在实际使用中我们要先有一套规则，再进行检验

检索

除了test()还有一个方法

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

 const str='我有三只小兔子，分别是阿米娅兔兔，特雷西娅兔兔，德克萨斯兔兔'
        //定义正则表达式
        const reg=/兔兔/
        //是否匹配
        console.log(reg.exec(str));

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

其中的index表示数组的下标14的位置上匹配成功

返回值不同是test()和exec()最大的区别

元字符

普通的字符只能描述他们本身，而元字符是一些具有特殊意义的字符，可以匹配一类字符，例如普通字符里想表示26个英文字母，需要abcdefg......一个一个写出来，但是元字符可以用[a-z]来表示这些字符

极大提高了灵活性和强大的匹配功能。

参考文档：MDN：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Guide/Regular_Expressions

正则表达式的测试工具： http://tool.oschina.net/regex

元字符太多了，所以我们对它做出分类，分别是边界符、量词、字符类

边界符

表示字符的位置，必须以某某字符开头、结尾等格式要求

第一个true:str里含有gigity

第二个和第三个的true是因为str以gigity开头/结尾

如果想要精确匹配：

//以某一字符开头，以某一字符结尾
console.log(/^gigity$/.test(str))

答案为什么是false?

当我们确定字符串的^和$（也就是开头和结尾），你们这个开头和结尾必须是同一个字符

也就是说只有这种情况才为true：

//和正则表达式里面的字符一模一样才是true
console.log(/^gigity$/.test('gigity'))/'/true

欸，那你就要问了（谁问你了）怎么表示多个重复字符的正则表达式字面量呢？所以我们要学：

量词

表示字符的重复次数，设定某个模式出现的次数

*：

const str = 'ygigitygigitygigitygigity'
         console.log(/^gigity*$/.test(str));//false
            console.log(/y*$/.test(str));//true

为什么第一个是false?第二个是true?

首先，在字符后面加【*】则这个字符只作用于该字符正前方的字符也就是【y】，那么这句正则表达式的意思就变成了【匹配的是以 "gigity" 开头，后面可以跟 0 个或多个 y 的字符串】，而该字符不满足这个规则，所以false

所以根据这个规则，我们写成第二种形式的意思是【含0个或多个y并且以y结尾的字符串】，str满足条件，所以true

如果你想匹配多个 "gigity" 的重复，可以使用 /^(gigity)+$/：

const str = 'gigitygigitygigitygigity';
console.log(/^(gigity)+$/.test(str)); // true

当然如果我们写成这样：

console.log(/^y*$/.test(str));

就false了，因为这样的写法要求【字符串里只能有0或0个以上的y】

+：

改为+也很好理解，至少有一个【y】

 const str = 'ygigitygigitygigitygigity'
         console.log(/^gigity+$/.test(str));//false
            console.log(/y+$/.test(str));//true

？：

只有出现0和1次为true，其余都为false

const str = 'ygigitygigitygigitygigity'
         console.log(/^gigity?$/.test(str));//false
            console.log(/y?$/.test(str));//true

当然，以上三种量词也可以辨别空白：

  console.log(/^y*$/.test(''));//true
        console.log(/^y+$/.test(''));//false
        console.log(/^y?$/.test(''));//true

还可以设置固定字符出现的次数：只有只出现四个【y】时为true

console.log(/^y{3}$/.test(''));//false
console.log(/^y{3}$/.test('y'));//false
console.log(/^y{3}$/.test('yy'));//false
console.log(/^y{3}$/.test('yyy'));//true

可以用作判别手机号、验证码、身份证号码输入的位数是否正确

大于等于3即为true:

console.log(/^y{3,}$/.test('yy'));//false
console.log(/^y{3,}$/.test('yyy'));//true
console.log(/^y{3,}$/.test('yyyy'));//true
console.log(/^y{3,}$/.test('yyyyy'));//true

大于等于三，小于等于4即为true（注意{n,m}【，】左右两边没有空格）:

console.log(/^y{3,4}$/.test('yy'));//false
console.log(/^y{3,4}$/.test('yyy'));//true
console.log(/^y{3,4}$/.test('yyyy'));//true
console.log(/^y{3,4}$/.test('yyyyy'));//false

字符类

类似于[a-z]等表示一类字符的元字符，\d表示0~9（其实我在学makefile的时候就没觉得正则表达式方便到哪去）

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

当判定为【字符串里含a/b/c里的一个以上】的时候会判定为false,但是用上量词，就会变为true:

使用连字符表示一个范围：

Ø [a-z] 表示 a 到 z 26个英文字母都可以

Ø [a-zA-Z] 表示大小写都可以

Ø [0-9] 表示 0~9 的数字都可以

比如：

1、在[]内加^符表示取反，和[]内的字符取反，[^abc]表示【abc之外的所有其他字符】

2、【.】匹配除了换行符的任何单个字符

3、预定义类：某些常见模式的简写方式。

表单判断案例

<!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>Document</title>
    <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 = document.querySelector('span')
        input.addEventListener('blur', function () {
            if (reg.test(this.value)) {
                span.innerHTML = '输入正确'
                span.classList.remove('error')
                span.classList.add('right')
            } else {
                span.innerHTML = '请输入6-16位的英文、数字或下划线'
                // span.classList.remove('right')
                // span.classList.add('error')也可以用className来修改类名
                span.className='error'
            }
        })
    </script>
</body>

</html>

修饰符

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

语法：

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

g 是单词 global 的缩写，匹配所有满足正则表达式的结果，一般用于全局替换

替换：replace 替换

和g一起作用，或是【|】竖线：

过滤敏感词

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<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(/wcnm/g,'我上早八')
        })

    </script>
</body>

</html>

注册界面

利用之前学过的东西写一个注册页面

其中讲到了两个新的知识点：

change事件，是判断表单和之前的内容有没有区别的事件

classList.contains()可以确定该元素有没有包含某个类

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 项部导航 -->
  <div class="xtx_topnav">
    <div class="wrapper">
      <!-- 顶部导航 -->
      <ul class="xtx_navs">
        <li>
          <a href="./login.html">请先登录</a>
        </li>
        <li>
          <a href="./register.html">免费注册</a>
        </li>
        <li>
          <a href="./center-order.html">我的订单</a>
        </li>
        <li>
          <a href="./center.html">会员中心</a>
        </li>
        <li>
          <a href="javascript:;">帮助中心</a>
        </li>
        <li>
          <a href="javascript:;">在线客服</a>
        </li>
        <li>
          <a href="javascript:;">
            <i class="mobile sprites"></i>
            手机版
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- 头部 -->
  <div class="xtx_header">
    <div class="wrapper">
      <!-- 网站Logo -->
      <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
      <!-- 主导航 -->
      <div class="xtx_navs">
        <ul class="clearfix">
          <li>
            <a href="./index.html">首页</a>
          </li>
          <li>
            <a href="./category01.html">生鲜</a>
          </li>
          <li>
            <a href="./category01.html">美食</a>
          </li>
          <li>
            <a href="./category01.html">餐厨</a>
          </li>
          <li>
            <a href="./category01.html">电器</a>
          </li>
          <li>
            <a href="./category01.html">居家</a>
          </li>
          <li>
            <a href="./category01.html">洗护</a>
          </li>
          <li>
            <a href="./category01.html">孕婴</a>
          </li>
          <li>
            <a href="./category01.html">服装</a>
          </li>
        </ul>
      </div>
      <!-- 站内搜索 -->
      <div class="xtx_search clearfix">
        <!-- 购物车 -->
        <a href="./cart-none.html" class="xtx_search_cart sprites">
          <i>2</i>
        </a>
        <!-- 搜索框 -->
        <div class="xtx_search_wrapper">
          <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
        </div>
      </div>
    </div>
  </div>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码  ">
            <span class="msg"></span>
          </div>
          <div data-prop="code" class="xtx-form-item">
            <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
            <input name="code" type="text" placeholder="短信验证码">
            <span class="msg"></span>
            <a class="code" href="javascript:;">发送验证码</a>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="xtx-form-item pl50">
            <i class="iconfont icon-queren"></i>
            已阅读并同意<i>《用户服务协议》</i>
          </div>
          <div class="xtx-form-item">
            <button class="submit">下一步</button>
            <!-- <a class="submit" href="javascript:;">下一步</a> -->
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="xtx_footer clearfix">
    <div class="wrapper">
      <!-- 联系我们 -->
      <div class="contact clearfix">
        <dl>
          <dt>客户服务</dt>
          <dd class="chat">在线客服</dd>
          <dd class="feedback">问题反馈</dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd class="weixin">公众号</dd>
          <dd class="weibo">微博</dd>
        </dl>
        <dl>
          <dt>下载APP</dt>
          <dd class="qrcode">
            <img src="./uploads/qrcode.jpg">
          </dd>
          <dd class="download">
            <span>扫描二维码</span>
            <span>立马下载APP</span>
            <a href="javascript:;">下载页面</a>
          </dd>
        </dl>
        <dl>
          <dt>服务热线</dt>
          <dd class="hotline">
            400-0000-000
            <small>周一至周日 8:00-18:00</small>
          </dd>
        </dl>
      </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
      <div class="wrapper">
        <!-- 口号 -->
        <div class="slogan">
          <a href="javascript:;" class="price">价格亲民</a>
          <a href="javascript:;" class="express">物流快捷</a>
          <a href="javascript:;" class="quality">品质新鲜</a>
        </div>
        <!-- 版权信息 -->
        <div class="copyright">
          <p>
            <a href="javascript:;">关于我们</a>
            <a href="javascript:;">帮助中心</a>
            <a href="javascript:;">售后服务</a>
            <a href="javascript:;">配送与验收</a>
            <a href="javascript:;">商务合作</a>
            <a href="javascript:;">搜索推荐</a>
            <a href="javascript:;">友情链接</a>
          </p>
          <p>CopyRight &copy; 小兔鲜儿</p>
        </div>
      </div>
    </div>
  </div>
  <script>
    //验证码模块
    const code = document.querySelector('.code')
    let flag = true
    let timerId = code.addEventListener('click', function () {
      if (flag) {
        flag = false
        let i = 5
        code.innerHTML = `0${i}秒后重新获取`
        setInterval(function () {
          i--
          code.innerHTML = `0${i}秒后重新获取`
          if (i === 0) {
            clearInterval(timerId)
            flag = true
            code.innerHTML = `重新获取`
          }
        }, 1000)
      }
    })
    //用户名验证
    const username = document.querySelector('[name=username]')
    username.addEventListener('change', verifyName)
    function verifyName() {
      //使用正则表达式验证
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      //使用兄弟节点操纵span，因为dom树里有很多span
      const span = username.nextElementSibling
      //如果不通过
      if (!reg.test(username.value)) {
        //console.log('不通过');
        span.innerText = '输入不合法，请输入6~10位'
        return false
      }
      //如果通过
      span.innerText = ''
      return true
    }
    //手机号验证
    const phone = document.querySelector('[name=phone]')
    phone.addEventListener('change', verifyPhone)
    function verifyPhone() {
      //使用正则表达式验证
      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}$/
      //使用兄弟节点操纵span，因为dom树里有很多span
      const span = phone.nextElementSibling
      //如果不通过
      if (!reg.test(phone.value)) {
        //console.log('不通过');
        span.innerText = '输入不合法，请输入正确的11位手机号'
        return false
      }
      //如果通过
      span.innerText = ''
      return true
    }
    //验证码验证
    const codeInput = document.querySelector('[name=code]')
    codeInput.addEventListener('change', verifyCodeInput)
    function verifyCodeInput() {
      //使用正则表达式验证
      const reg = /^\d{6}$/
      //使用兄弟节点操纵span，因为dom树里有很多span
      const span = codeInput.nextElementSibling
      //如果不通过
      if (!reg.test(codeInput.value)) {
        //console.log('不通过');
        span.innerText = '输入不合法，请输入6位数字'
        return false
      }
      //如果通过
      span.innerText = ''
      return true
    }
    //密码验证
    const password = document.querySelector('[name=password]')
    password.addEventListener('change', verifyPassword)
    function verifyPassword() {
      //使用正则表达式验证
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      //使用兄弟节点操纵span，因为dom树里有很多span
      const span = password.nextElementSibling
      //如果不通过
      if (!reg.test(password.value)) {
        //console.log('不通过');
        span.innerText = '输入不合法，请输入6~20位数字、字母和符号'
        return false
      }
      //如果通过
      span.innerText = ''
      return true
    }
    //再次输入密码
    const confirm = document.querySelector('[name=confirm]')
    confirm.addEventListener('change', verifyConfirm)
    function verifyConfirm() {
      //使用兄弟节点操纵span，因为dom树里有很多span
      const span = confirm.nextElementSibling
      //如果不通过
      if (confirm.value !== password.value) {
        //console.log('两次输入密码不一致');
        span.innerText = '两次输入密码不一致'
        return false
      }
      //如果通过
      span.innerText = ''
      return true
    }
    //用户协议勾选状态切换
    const queren = document.querySelector('.icon-queren')
    queren.addEventListener('click', function () {
      //切换类，原有的删掉，没有的添加
      this.classList.toggle('icon-queren2')
    })
    //表单提交
    //没有勾选同意协议，提示需要勾选:classList.contains()查看有没有包含某个类，如果有则返回true，没有返回false
    //验证模块中有一个返回false则阻止提交
    const form = document.querySelector('form')
    form.addEventListener('submit', function () {
      if (!queren.classList.contains('icon-queren2')) {
        alert('请勾选同意协议')
        //阻止默认行为才能真正阻止提交
        e.preventDefault()
      }
      //判断先前的验证模块，返回false就代表没有通过验证
      if (!verifyName()) e.preventDefault()
      if (!verifyPhone) e.preventDefault()
      if (!verifyPassword) e.preventDefault()
      if (!verifyCodeInput) e.preventDefault()
      if (!verifyConfirm) e.preventDefault()
    })

  </script>
</body>

</html>

登录界面：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
  <!-- 登录头部 -->
  <div class="xtx-login-header">
    <h1 class="logo"></h1>
    <a class="home" href="./index.html">进入网站首页</a>
  </div>
  <!-- 登录内容 -->
  <div class="xtx-login-main">
    <div class="wrapper">
      <form action="" autocomplete="off">
        <div class="box">
          <div class="tab-nav">
            <a href="javascript:;" class="active" data-id="0">账户登录</a>
            <a href="javascript:;" data-id="1">二维码登录</a>
          </div>
          <div class="tab-pane">
            <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input required type="text" placeholder="请输入用户名称/手机号码" name="username">
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <input required type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="agree">
              <label for="my-checkbox">
                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
            </div>
            <div class="button clearfix">
              <button type="submit" class="dl">登 录</button>
              <!-- <a class="dl" href="./center.html">登 录</a> -->
              <a class="fl" href="./forget.html">忘记密码？</a>
              <a class="fr" href="./register.html">免费注册</a>
            </div>
          </div>
          <div class="tab-pane" style="display: none;">
            <img class="code" src="./images/code.png" alt="">
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>
  <script>
    //判断是否通过事件委托来自注册事件，关系太复杂的盒子（互相套来套去不建议使用事件委托）
    //tab栏切换，使用事件委托
    const tab_nav = document.querySelector('.tab-nav')
    const pane = document.querySelectorAll('.tab-pane')
    tab_nav.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        //取消上一个active，位当前元素添加active
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
        //通过for()循环将两个盒子都隐藏
        for (let i = 0; i < pane.length; i++) {
          pane[i].style.display = 'none'
        }
        //让对应需要的pane显示
        pane[e.target.dataset.id].style.display = 'block'
      }
    })
    //点击提交模块
    const form = document.querySelector('form')
    const agree = document.querySelector('[name=agree]')
    form.addEventListener('submit', function (e) {
      e.preventDefault()
      //判断是否勾选同意协议
      if (!agree.checked) {
        return alert('请勾选同意协议')
      }
      //保存用户名到本地
      const username = document.querySelector('[name=username]')
      localStorage.setItem('xtx-uname', username.value)
      //跳转到主页
      location.href = './index.html'
    })
   
  </script>
</body>

</html>

从登陆页面跳转到主页的模块：js

<script>
    //从登录页面跳转过来   
    //获取第一个li
    const li1 = document.querySelector('.xtx_navs li:first-child')
    const li2 = li1.nextElementSibling
    function render() {
      const uname = localStorage.getItem('xtx-uname')
      //console.log(uname)
      if (uname) {
        li1.innerHTM = `<a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>`
        li2.innerHTML = `<a href="javascript:;">退出登录</a>`
      } else {
        li1.innerHTML = `<a href="./login.html">请先登录</a>`
        li2.innerHTML = `<a href="./register.hmtl">免费注册</a>`
      }
    }
    render()
    //退出登录的模块
    li2.addEventListener('click', function () {
      localStorage.removeItem('xtx-uname')
      render()
    })
  </script>