#JavaScript(WebAPIs)【04完结篇】

bestwishesn

已于 2023-09-17 20:26:48 修改

阅读量95

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-09-17 17:23:18 首次发布

本文链接：https://blog.csdn.net/2301_79501633/article/details/132921269

版权

目录

一，正则表达式

1.1，正则表达式（Regular Expression）是用于匹配字符串中字符串的组合的模式。在JavaScript 中，正则表达式也是对象

1.2.语法

1.3，元字符

1.4，边界符

1.5，量词

1.6，字符类

1.7，案例

1.8 ，修饰符

1.9，过滤敏感词

综合案例表单案例

01验证码倒计时模块：

02验证表单

03验证手机号是否合法

04验证验证码输入是否合法

05验证密码是否合法

06验证第二次输入的密码是否与第一次相同

07我同意模块

总结相关正则表达式

综合案例放大镜案例

01获取三个盒子

02鼠标经过中等盒子，显示隐藏大盒子

03鼠标经过大盒子，显示隐藏大盒子

04鼠标经过中等盒子，显示隐藏黑色遮罩层

05移动黑色遮罩盒子（*******）

一，正则表达式

1.1，正则表达式（Regular Expression）是用于匹配字符串中字符串的组合的模式。在JavaScript 中，正则表达式也是对象

1.2.语法

const 变量名 = /表达式/

test()方法

<!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 = '我们在学习前端'
    // 1，定义规则
    const re = /前端/
    // 2，查找是否匹配
    re.test(str) // test()返回值是 true 和 false
    console.log(re.test(str)); //返回true
  </script>
</body>

</html>

exec()方法返回的是数组

<!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 = '我们在学习前端'
    // 1，定义规则
    const re = /前端/
    // 2，查找是否匹配
    re.test(str) // test()返回值是 true 和 false
    console.log(re.test(str)); //返回true
    re.exec(str)
    console.log(re.exec(str));
  </script>
</body>

</html>

1.3，元字符

MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

测试工具https://tool.oschina.net/regex/

边界类（表示位置，开头和结尾，必须以什么结尾，用什么开头）
量词（表示重复次数）
字符类（比如\d 表示0-9）

1.4，边界符

正则表达式中边界符主要有两个

边界符	说明
^	表示匹配行首的文本以谁开始
$	表示匹配行首的文本以谁结束

^和$在一块就是精确匹配

<!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(/^哈/.test('哈'));
    console.log(/^哈$/.test('哈哈啊'));
  </script>
</body>

</html>

1.5，量词

量词用来设定某个模式出现的次数

量词	说明
*	重复零次或者更多次
+	重复一次或者更多次
？	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

<!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('---------------------------------');
    console.log(/^哈/.test('哈'));
    console.log(/^哈$/.test('哈哈啊'));
    console.log('---------------------------------');
    console.log(/^哈*$/.test('哈')); //true
    console.log(/^哈*$/.test(''))
    console.log(/^哈*$/.test('二哈啊啊啊哈'))
    console.log(/^哈*$/.test('哈哈哈哈'))
    console.log(/^哈*$/.test('哈哈很哈'))
    
    console.log('---------------------------------');
  </script>
</body>

</html>

<!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('---------------------------------');
    console.log(/^哈/.test('哈'));
    console.log(/^哈$/.test('哈哈啊'));
    console.log('---------------------------------');
    console.log(/^哈+$/.test('哈')); //true
    console.log(/^哈+$/.test(''))
    console.log(/^哈+$/.test('二哈啊啊啊哈'))
    console.log(/^哈+$/.test('哈哈哈哈'))
    console.log(/^哈+$/.test('哈哈很哈'))
    
    console.log('---------------------------------');
  </script>
</body>

</html>

<!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('---------------------------------');
    console.log(/^哈/.test('哈'));
    console.log(/^哈$/.test('哈哈啊'));
    console.log('---------------------------------');
    console.log(/^哈?$/.test('哈')); //true
    console.log(/^哈?$/.test(''))
    console.log(/^哈?$/.test('二哈啊啊啊哈'))
    console.log(/^哈?$/.test('哈哈哈哈'))
    console.log(/^哈?$/.test('哈哈很哈'))

    console.log('---------------------------------');
  </script>
</body>

</html>

注意逗号左右不要出现空格

<!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('---------------------------------');
    console.log(/^哈/.test('哈'));
    console.log(/^哈$/.test('哈哈啊'));
    console.log('---------------------------------');
    console.log(/^哈?$/.test('哈')); //true
    console.log(/^哈?$/.test(''))
    console.log(/^哈?$/.test('二哈啊啊啊哈'))
    console.log(/^哈?$/.test('哈哈哈哈'))
    console.log(/^哈?$/.test('哈哈很哈'))

    console.log('---------------------------------');

    console.log(/^哈{4}$/.test('哈哈哈哈'));
    console.log(/^哈{4}$/.test('哈哈'));
    console.log(/^哈{4}$/.test('哈哈哈哈哈'));
    console.log('---------------------------------');
    console.log('---------------------------------');
    console.log(/^哈{4,}$/.test('哈哈哈哈'));
    console.log(/^哈{4,}$/.test('哈哈'));
    console.log(/^哈{4,}$/.test('哈哈哈哈哈'));
    console.log('---------------------------------');
    console.log(/^哈{4,6}$/.test('哈哈哈哈'));
    console.log(/^哈{4,6}$/.test('哈哈'));
    console.log(/^哈{4,6}$/.test('哈哈哈哈哈'));
  </script>
</body>

</html>

1.6，字符类

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

<!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>
    //字符类   [abc] 只选一个
    console.log(/^[abc]$/.test('a'));
    console.log(/^[abc]$/.test('b'));
    console.log(/^[abc]$/.test('c'));
    console.log(/^[abc]$/.test('ac'));
    console.log(/^[abc]{2}$/.test('ba'));
    console.log(/^[abc]$/.test('bc'));
    console.log(/^[abc]{3}$/.test('abc'));
  </script>
  </script>
</body>

</html>

字符类 [a-z] 26个字母都包含了

<!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>
    //字符类   [abc] 只选一个
    console.log(/^[abc]$/.test('a'));
    console.log(/^[abc]$/.test('b'));
    console.log(/^[abc]$/.test('c'));
    console.log(/^[abc]$/.test('ac'));
    console.log(/^[abc]{2}$/.test('ba'));
    console.log(/^[abc]$/.test('bc'));
    console.log(/^[abc]{3}$/.test('abc'));
    console.log('---------------------------------');
    console.log(/^[a-z]$/.test('abc'));
    console.log(/^[A-Z]$/.test('abcQ'));
    console.log('---------------------------------');
    console.log(/^[0-9]$/.test('a'));
    console.log(/^[a-zA-Z0-9]$/.test('k'));

  </script>
  </script>
</body>

</html>

[^a-z] 除了小写字母
. 匹配换行符以外的任何单个字符

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>
  <style>
    .error {
      color: red;
    }

    .right {
      color: green;
    }
  </style>

</head>

<body>
  <input type="text">
  <span></span>
  <script>
    const re = /^[a-zA-Z0-9-_]{6,16}$/
    const input = document.querySelector('input')
    const span = input.nextElementSibling
    input.addEventListener('blur', function () {
      if (re.test(this.value)) {
        span.innerHTML = '输入正确'
        span.className = 'right'
      }
      else {
        span.innerHTML = '输入错误'
        span.className = 'error'
      }
    })
  </script>
</body>

</html>

预定义类

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母，数字下划线，相当于[A-Za-z0-9_]
\W	除所有字母，数字下划线以外的字符，相当于[^A-Za-z0-9_]
\s	匹配空格（包括换行换行符，制表符，空格等），相当于[\t\r\n\v\f]
\S	匹配非空格的字符，相当于[^\t\r\n\v\f]

  <script>
    日期格式:^\d{ 4 } -\d{ 1, 2 } -\d{ 1, 2 } \ 
  </script>

1.8 ，修饰符

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 = 'java是一门编程语言,java很牛'
    const re = str.replace(/java/i, '前端')
    const re2 = str.replace(/java/ig, '前端')
    const re3 = str.replace(/java|JAVA/ig, '前端')
    console.log(re);
    console.log(re2);
  </script>
</body>

</html>

1.9，过滤敏感词

<!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 () {

      div.innerHTML = tx.value.replace(/激情|基情/, '**')
      tx.value = ''
    })
  </script>
</body>

</html>

综合案例表单案例

01验证码倒计时模块：

    (function (){
      //发送短信验证码模块
      const code = document.querySelector('.code')
      let flag = true  //通过一个变量来控制
      //点击时间
      code.addEventListener('click',function (){
        if(flag){
          //取反了 下一次不能马上第二次点击点击
          flag = false
          let i = 6
          //点击完毕立马触发
          code.innerHTML = `0${i}秒后重新获取`
          //倒计时模块
          let timeId = setInterval(function (){
            i--
            code.innerHTML = `0${i}秒后重新获取`
            if(i===0){
              //倒计时结束 变回原样
              clearInterval(timeId)
              // 重新获取
              code.innerHTML = `重新获取`
              //时间到了 开启flag
              flag = true
            }
          },1000)
        }
      })

    }())

02验证表单

    //验证名称
    //获取表单
    const username = document.querySelector('[name=username]')
    //使用change事件
    username.addEventListener('change',verifyName)
    //封装函数
    function verifyName(){
    // 定规则 正则表达式
      const span = username.nextElementSibling
      const re = /^[a-zA-Z0-9]{6,10}$/
      if(!re.test(username.value)){
        // console.log(11)
        span.innerText = '输入不合法，请输入6~10位'
        return false
      }
      //合法的 就清空span
      span.innerText = ''
      return true
    }

03验证手机号是否合法

    //验证手机号
    //获取表单
    const phone = document.querySelector('[name=phone]')
    //使用change事件
    phone.addEventListener('change',verifyPhone)
    //封装函数
    function verifyPhone(){
      // 定规则 正则表达式
      const span = phone.nextElementSibling
      const re = /^1(\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]8\d[0-35-9])\d{8}$/
      if(!re.test(phone.value)){
        // console.log(11)
        span.innerText = '输入不合法，请输入11位'
        return false
      }
      //合法的 就清空span
      span.innerText = ''
      return true
    }

04验证验证码输入是否合法

    //验证验证码
    //获取表单
    const codeInput = document.querySelector('[name=code]')
    //使用change事件
    codeInput.addEventListener('change',verifyCode)
    //封装函数
    function verifyCode(){
      // 定规则 正则表达式
      const span = codeInput.nextElementSibling
      const re = /^\d{6}$/
      if(!re.test(codeInput.value)){
        // console.log(11)
        span.innerText = '输入不合法，请输入6位验证码'
        return false
      }
      //合法的 就清空span
      span.innerText = ''
      return true
    }

05验证密码是否合法

   //验证密码框
    //获取表单
    const password = document.querySelector('[name=password]')
    //使用change事件
    password.addEventListener('change',verifyPwd)
    //封装函数
    function verifyPwd(){
      // 定规则 正则表达式
      const span = password.nextElementSibling
      const re = /^[a-zA-Z0-9-_](6,20)$/
      if(!re.test(password.value)){
        // console.log(11)
        span.innerText = '输入不合法，请输入合法密码'
        return false
      }
      //合法的 就清空span
      span.innerText = ''
      return true
    }

06验证第二次输入的密码是否与第一次相同


    //密码的再次验证
    //获取表单
    const confirm = document.querySelector('[name=confirm]')
    //使用change事件
    confirm.addEventListener('change',verifyPwdconfirm)
    //封装函数
    function verifyPwdconfirm (){
      // 定规则 正则表达式
      const span = confirm.nextElementSibling
      // const re = /^[a-zA-Z0-9-_](6,20)$/
      // 判断两次密码是否相等
      if(confirm.value !== password.value){
        // console.log(11)
        span.innerText = '两次输入密码不一致'
        return false
      }
      //合法的 就清空span
      span.innerText = ''
      return true
    }

07我同意模块


    //提交模块
    const form = document.querySelector('form')
    form.addEventListener('submit',function(e){
      //判断是否勾选我同意，如果有icon-queren2说明勾选了，否则就没勾选
      if(!queren.classList.contains('icon-queren2')){
         alert('请勾选协议')
         e.preventDefault()
      }
      //依次判断
      if(!verifyName()) e.preventDefault()
      if(!verifyPhone()) e.preventDefault()
      if(!verifyCode()) e.preventDefault()
      if(!verifyPwd()) e.preventDefault()
      if(!verifyPwdconfirm()) e.preventDefault()
    })

总结相关正则表达式

综合案例放大镜案例

01获取三个盒子

  // 1. 获取三个盒子
    // 2. 小盒子 图片切换效果
    const small = document.querySelector('.small')
    //  中盒子
    const middle = document.querySelector('.middle')
    //  大盒子
    const large = document.querySelector('.large')
    // 2. 事件委托
    small.addEventListener('mouseover', function (e) {
      if (e.target.tagName === 'IMG') {
        // console.log(111)
        // 排他 干掉以前的 active  li 上面
        this.querySelector('.active').classList.remove('active')
        // 当前元素的爸爸添加 active
        e.target.parentNode.classList.add('active')
        // 拿到当前小图片的 src
        // console.log(e.target.src)
        // 让中等盒子里面的图片，src 更换为   小图片src
        middle.querySelector('img').src = e.target.src
        // 大盒子更换背景图片
        large.style.backgroundImage = `url(${e.target.src})`
      }
    })

02鼠标经过中等盒子，显示隐藏大盒子

   // 3. 鼠标经过中等盒子， 显示隐藏 大盒子
    middle.addEventListener('mouseenter', show)
    middle.addEventListener('mouseleave', hide)
    let timeId = null
    // 显示函数 显示大盒子
    function show() {
      // 先清除定时器
      clearTimeout(timeId)
      large.style.display = 'block'
    }
    // 隐藏函数 隐藏大盒子
    function hide() {
      timeId = setTimeout(function () {
        large.style.display = 'none'
      }, 200)
    }

03鼠标经过大盒子，显示隐藏大盒子

    // 4. 鼠标经过大盒子， 显示隐藏 大盒子
    large.addEventListener('mouseenter', show)
    large.addEventListener('mouseleave', hide)

04鼠标经过中等盒子，显示隐藏黑色遮罩层

    // 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
    const layer = document.querySelector('.layer')
    middle.addEventListener('mouseenter', function () {
      layer.style.display = 'block'
    })
    middle.addEventListener('mouseleave', function () {
      layer.style.display = 'none'
    })

05移动黑色遮罩盒子（*******）

  // 6.移动黑色遮罩盒子
    middle.addEventListener('mousemove', function (e) {
      // let x = 10, y = 20
      // console.log(11)
      // 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
      // console.log(e.pageX)鼠标在页面中的坐标
      // middle 中等盒子的坐标
      // console.log(middle.getBoundingClientRect().left)
      let x = e.pageX - middle.getBoundingClientRect().left
      let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
      // console.log(x, y)
      // 黑色遮罩移动 在 middle 盒子内 限定移动的距离
      if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
        // 黑色盒子不是一直移动的
        // 声明2个变量 黑色盒子移动的 mx my变量 
        let mx = 0, my = 0
        if (x < 100) mx = 0
        if (x >= 100 && x <= 300) mx = x - 100
        if (x > 300) mx = 200

        if (y < 100) my = 0
        if (y >= 100 && y <= 300) my = y - 100
        if (y > 300) my = 200

        layer.style.left = mx + 'px'
        layer.style.top = my + 'px'
        // 大盒子的背景图片要跟随 中等盒子移动  存在的关系是 2倍   
        large.style.backgroundPositionX = -2 * mx + 'px'
        large.style.backgroundPositionY = -2 * my + 'px'
      }
    })

bestwishesn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
#JavaScript(WebAPIs)【04完结篇】

/ 1. 获取三个盒子// 2. 小盒子图片切换效果// 中盒子// 大盒子// 2. 事件委托// 排他干掉以前的 active li 上面// 当前元素的爸爸添加 active// 拿到当前小图片的 src// 让中等盒子里面的图片，src 更换为小图片src// 大盒子更换背景图片})
复制链接

扫一扫