JavaScript(正则表达式)

最新推荐文章于 2024-11-12 11:19:19 发布

m0_71819030

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量62

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_71819030/article/details/134431657

版权

正则表达式

语法

元字符

边界符

量词

字符类

案例

<script>
        // 1. 准备正则
        const reg = /^[a-zA-Z0-9-_]{6,16}$/
        const input = document.querySelector('input')
        const span = input.nextElementSibling
        input.addEventListener('blur', function () {
            // console.log(reg.test(this.value))
            if (reg.test(this.value)) {
                span.innerHTML = '输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '请输入6~16位的英文数字下划线'
                span.className = 'error'
            }
        })
    </script>

修饰符

<script>
    console.log(/^java$/.test('java'))
    console.log(/^java$/i.test('JAVA'))
    console.log(/^java$/i.test('Java'))
    const str = 'java是一门编程语言， 学完JAVA工资很高'
    // const re = str.replace(/java|JAVA/g, '前端')
    const re = str.replace(/java/ig, '前端')
    console.log(re)  // 前端是一门编程语言， 学完前端工资很高
  </script>

案例

<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(/激情|基情/g, '**')
      tx.value = ''
    })
  </script>
</body>

综合案例

1 发送验证码模块

(function () {
      // 1. 发送短信验证码模块
      const code = document.querySelector('.code')
      let flag = true  // 通过一个变量来控制   节流阀 
      //  1.1 点击事件
      code.addEventListener('click', function () {
        if (flag) {
          // 取反了，不能马上第二次点击
          flag = false
          let i = 5
          // 点击完毕之后立马触发
          code.innerHTML = `0${i}秒后重新获取`
          // 开启定时器
          let timerId = setInterval(function () {
            i--
            code.innerHTML = `0${i}秒后重新获取`
            if (i === 0) {
              // 清除定时器
              clearInterval(timerId)
              // 从新获取
              code.innerHTML = `重新获取`
              // 到时间了，可以开启 flag了
              flag = true
            }
          }, 1000)
        }
      })
    })();