认识正则正则区别元字符限定符边界符特殊符号—标识符懒惰性贪婪性正则两种方法 test exec 身份证判断字符串和正则合作的方法密码等级表单验证

文章介绍了正则表达式的基础知识，包括元字符、限定符、边界符和特殊符号的用法，以及在JavaScript中的匹配方法如test()和exec()。同时，提供了两个实际示例，一个是动态评估密码强度，另一个是表单验证，展示了正则在验证用户输入数据（如用户名、密码、电话号码）中的应用。

认识正则正则区别

元字符 \d \D \s \S \w \W . \

限定符 * + ？{n} {n,} {n,m}

边界符 ^ $

特殊符号() | [] [^] -

正则的重复元字符

标识符 i g

正则两大特性懒惰性贪婪性

正则两种方法 test（）匹配 exec（）捕获

身份证判断

字符串和正则合作的方法

replace（）换上换下

search()检测有没有要包含的索引片段

match（）捕获检测出来的内容以数组形式返回

正则替换敏感词

正则预查

密码等级

  // 0. 获取元素
    var pwdInp = document.querySelector('input')
    var spans = document.querySelectorAll('p > span')

    // 准备三个正则
    var regN = /\d/
    var regW = /[a-z]/i
    var regF = /[!@#]/


    // 1. 绑定事件
    pwdInp.addEventListener('input', function () {
      // 1-1. 拿到文本框中输入的内容
      var pwd = pwdInp.value

      // 1-2. 检测密码级别
      var level = 0
      // 开始检测
      if (regN.test(pwd)) level++
      if (regW.test(pwd)) level++
      if (regF.test(pwd)) level++

      // 1-3. 在添加类名之前, 把所有的 span 类名全都干掉
      for (var j = 0; j < spans.length; j++) {
        spans[j].classList.remove('active')
        if (j < level) spans[j].classList.add('active')
      }
    })

表单验证

    // 1. 定义正则
    var regObj = {
      username: /^[0-9a-z]\w{5,11}$/i,
      password: /^\w{6,12}$/,
      phone: /^\d{11}$/
    }

    // 2. 拿到所有的 文本框
    var inps = document.querySelectorAll('form input')

    // 3. 给每一个 input 文本框添加事件
    for (var i = 0; i < inps.length; i++) {
      inps[i].oninput = function () {
        // 4-1. 拿到当前这个文本框的内容
        var text = this.value
        // 4-2. 拿到当前这个元素的 data-reg 自定义属性
        var s = this.dataset.reg
        // 4-3. 拿到需要使用的正则表达式
        var reg = regObj[s]
        // 4-4. 拿到错误的时候需要显示的标签
        var err = this.nextElementSibling

        // 5. 判断和显示内容
        err.style.display = reg.test(text) ? 'none' : 'block'
      }
    }