JS第十七次笔记

爱泡脚的鸡腿
89 阅读2分钟

1.正则表达式

image.png

1.1 什么是正则表达式（匹配，替换，提取）

image.png

1.2 正则基本使用

image.png 案例： image.png

1.3 元字符

image.png

image.png

1.3.1 边界符

image.png

<!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>
  <script>
    //边界符 ^开头 $结尾
    //1.边界符开头
    console.log(/^h/.test('hello'))//T
    console.log(/^hel/.test('hello'))//T
    console.log(/^e/.test('hello'))//F
    //2.边界符结尾
    console.log("......")
    console.log(/o$/.test('hello'))//T
    console.log(/llo$/.test('hello'))//T
    console.log(/l$/.test('hello'))//F
    //3.边界符开头结尾（叫做精确匹配）
    console.log(/^h$/.test('h'))//T
    console.log(/^hel$/.test('hello'))//F
    console.log(/^e$/.test('hello'))//F

  </script>
</body>

</html>

1.3.2 量词

image.png

<!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>
  <script>
    //量词符
    //1.* （出现零次或者多次）
    console.log(/^哈*$/.test('哈'))//T
    console.log(/^哈*$/.test(''))//T(可以出现零次)

    //2.+(出现了一次或者多次)
    console.log(/^哈+$/.test('哈'))//T
    console.log(/^哈+$/.test(''))//F(至少出现一次)

    //3.?(出现零或一次)
    console.log(/^哈?$/.test('哈'))//T
    console.log(/^哈?$/.test(''))//T
    console.log(/^哈?$/.test('哈哈'))//F

    //4.{n}(出现n次)
    console.log(/^哈{2}$/.test('哈'))//F
    console.log(/^哈{2}$/.test(''))//F
    console.log(/^哈{2}$/.test('哈哈'))//T(只能出现指定次数)

    //5.{n,} (出现n次以上)
    console.log(/^哈{2,}$/.test('哈'))//F
    console.log(/^哈{2,}$/.test(''))//F
    console.log(/^哈{2,}$/.test('哈哈'))//T(只能出现指定次数)

    //6.{n,m}(出现n到m次)(逗号两侧不能加空格，否则会被当成普通字符)
    console.log(/^哈{2,5}$/.test('哈'))//F
    console.log(/^哈{2,5}$/.test(''))//F
    console.log(/^哈{2,5}$/.test('哈哈哈哈哈'))//T
    console.log(/^哈{2,5}$/.test('哈哈'))//T(只能出现指定次数)


  </script>

</body>

</html>

1.3.3 范围符

image.png

image.png

<!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>
  <script>
    // 范围符[]
    console.log(/^[abc]$/.test('a'))//T
    console.log(/^[abc]$/.test('ab'))//F(多选一，只能选择一个)
    //连字符 ——范围内的[a-z]
    console.log(/^[a-z]$/.test('a'))//T
    console.log(/^[a-z]$/.test('ab'))//F(多选一，只能选择一个)
    // ^[a-z]$ 除了括号内的都可以
    console.log(/^[^a-z]$/.test('a'))//F(除了小写字母以外的都可以)
    console.log(/^[^a-z]$/.test('A'))//T
    console.log(/^[^a-z]$/.test('0'))//T
    //多规则匹配
    console.log(/^[^a-z][0-9]$/.test('A'))//F（要符合两个规则）
    console.log(/^[^a-z][0-9]$/.test('A0'))//T（匹配到了两个规则）


  </script>
</body>

</html>

1.3.4 案例

image.png

1.4字符类

image.png

image.png

1.5替换和修饰符

语法：字符串.replace(/正则表达式/，替换内容) 注意：即便字符串中有多个符合的替换内容，都只默认替换第一个

<!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>
  <script>
    const str = "NEWJEANS is the best girl group in the world"
    //字符串.replace（正则表达式），替换内容
    const strEnd = str.replace(/NEWJEANS/, "NJZ")
    console.log(strEnd)
  </script>
</body>

</html>

image.png

1.6 替换和修饰符

image.png 可同时加ig

1.6.1 修饰符"i"

<!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>
  <script>
    const str = "NEWJEANS is the best girl group in the world NEWJEANS"
    //字符串.replace（正则表达式），替换内容
    const strEnd = str.replace(/newjeans/i, "njz")
    console.log(strEnd) 
  </script>
</body>

</html>

image.png

1.6.2 修饰符"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>
  <script>
    const str = "NEWJEANS is the best girl group in the world NEWJEANS"
    //字符串.replace（正则表达式），替换内容
    const strEnd = str.replace(/NEWJEANS/g, "NJZ")
    console.log(strEnd) 
  </script>
</body>

</html>

image.png

1.7 案例--手机号码中间四位隐藏

<!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>
  <script>
    const tel = "13631050350"
    //定义一个正则 隐藏中间四位(分成三个部分)
    //$1 $2 $3（各代表一个部分(用括号括起)）
    const reg = /^([0-9]{3})([0-9]{4})([0-9]{4})$/


    const res = tel.replace(reg, "$1****$3")//意思就是保留第一部分和第三部分，只更换第二部分为*
    
    
    //const res = tel.replace(reg, `$1${'*'.repeat(4)}$3`)//使用拼接字符串的方式，将中间的*重复四次
    alert(res)


  </script>
</body>

</html>

image.png

1.8 vscode中的正则插件

image.png

使用方式：

image.png

1.9 案例-注册

image.png

1.9.1 发送验证码

image.png

// 添加页面加载事件
window.addEventListener('DOMContentLoaded', function () {
  //1.发送业务
  //为了防止在倒计时的时候可以多次点击获取按钮，
  // 所以定义一个开关，当倒计时在执行的时候，置为false 不执行的时候，置为true
  //1.1 获取按钮，绑定验证码获取事件
  const codeBtn = document.querySelector('.code')

  //先将flag初始化为true，一开始是可以点击的
  let flag = true;

  codeBtn.addEventListener('click', function () {
    if (flag) {
      //只要代码开始执行，则置为false
      flag = false;
      let num = 5;

      //1.2修改按钮内容 ‘05秒后重新获取’
      this.innerHTML = '05秒后重新获取'
      //1.3利用定时器修改页面中的内容
      let timerid = setInterval(function () {
        num--
        codeBtn.innerHTML = `0${num}后重新获取`
        if (num <= 0) {
          clearInterval(timerid)
          codeBtn.innerHTML = '重新获取'
          //倒计时结束，falg又可以点击，所以置为true
          flag = true
        }
      }, 1000);
      //1.4倒计时结束，变成重行获取
    }
  })

})

1.9.2 表单验证

image.png

 //2.表单验证
  //给input添加改变事件
  //根据正则检验表单是否符合要求
  const uname = document.querySelector('[name="username"]')
  //触发条件是valeu改变且失去焦点
  uname.addEventListener('change', verifyname)
  //封装一个验证用户名的函数 verifyname 
  function verifyname() {
    //小写字母和大写字母 数字下划线组成 且 6-16位
    const regName = /^[a-zA-Z0-9_-]{6,16}$/
    const res = regName.test(uname.value)
    if (res) {
      uname.nextElementSibling.innerHTML = ''
      return true
    } else {
      uname.nextElementSibling.innerHTML = '用户名格式不正确'
      return false
    }
  }

1.9.3手机号验证

image.png

  const phoneDom = document.querySelector('[name="phone"]')

  phoneDom.addEventListener('change', verifyname)
  function verifyname() {
    const regPhone = /^1[3-9]\d{9}$/
    const res = regPhone.test(phoneDom.value)
    if (res) {
      phoneDom.nextElementSibling.innerHTML = ''
      return true
    } else {
      phoneDom.nextElementSibling.innerHTML = '手机号格式不正确'
      return false
    }
  }

})

1.9.4 短信验证

与之前类似

1.9.6 电话号码验证（第二次输入电话号）

//确认密码
  const confirmDom = document.querySelector('[name="confirm"]')
  confirmDom.addEventListener('change', verifyconfirm)
  function verifyconfirm() {
    if (pwdDom.value === confirmDom.value) {
      confirmDom.nextElementSibling.innerHTML = ''
      return true
    } else {
      confirmDom.nextElementSibling.innerHTML = '两次密码不一致'
      return false
    }

  }

1.9.7 勾选同意事项


  // 3.同意条款勾选
  const iconDom = document.querySelector('.iconfont.icon-queren')
  this.addEventListener('click', function () {
    //使用toggle切换
    iconDom.classList.toggle('icon-queren2')
  })
avatar
文章
阅读
粉丝