Day23-正则表达式和BOM

正则表达式

1 正则表达式(RegExp)概念

什么是正则表达式

正则表达式是由一些含有特殊含义的字符组成的字符串,这些含有特殊意义的字符称为元字符。

正则表达式的应用

校验一个字符串是否符合正则表达式定义的规则

2 元字符

正则表达式语法

案例1-基础用法

  • 创建RegExp对象
方式1: 字面量语法
let re = /正则表达式/ ;

方式2: 构造函数
let re = new RegExp("正则表达式"]);
    <script>
        /**
         * 什么是正则表达式
         *  正则表达式是使用具有特殊含义的字符组成的字符串,具有特殊含义的字符称为元字符
         * 正则表达式的作用
         *  用来校验字符串是否符合正则表达式的规则
         * 
         * 
         * 常用的元字符
         *  预定义字符
         *      数字          \d 或者 [0-9]
         *      小写字母    [a-z]
         *      大写字母    [A-Z]
         *      字母      [a-zA-Z]
         *      单词字符串  \w
         *  数量词
         *      0次或无限次  *
         *      1次或无限次  +
         *      0次或一次   ?
         *      m次        {m}
         *      m到n次     {m,n}
         *      m到无限次   {m,}
         *   边界判断
         *      开头      ^
         *      结尾      $
         */
        //1.验证出现的是否是2位数字
        let str1 = "12";
        
        //a.写正则表达式
        let reg1 = /^[0-9][0-9]$/
        //b.使用正则表示校验
        let f1 = reg1.test(str1)
        console.log(f1);


        //2.验证数字出现5次
        let str3 = "44445";
        //a.写正则表达式
        let reg2 = /^[0-9]{5}$/
        //b.使用正则表达式校验
        let f2 = reg2.test(str3)
        console.log(f2);

        //3.验证数字至少出现5次
        let str4 = "444499999999999999999";
        //a.写正则表达式
        let reg3 = /^[0-9]{5,}$/
        //b.使用正则表达式校验
        let f3 = reg3.test(str4)
        console.log(f3);

        //4.验证数字出现5-10次
        let str5 = "7895566666";
        //a.写正则表达式
        let reg4 = /^[0-9]{5,10}$/
        //b.使用正则表达式校验
        let f4 = reg4.test(str5)
        console.log(f4);

        //5.校验一个字符串是不是手机号   13  15 17 18    总共11位
        //a.写手机号
        let tel = "18571593511"
        //b.写正则表达式
        let reg5 = /^1[3578][0-9]{9}$/
        //c.使用正则表达式校验
        let f5 = reg5.test(tel)
        console.log(f5);

        //6.校验字符串是否符合规则,格式为5-10个字符,可以为字母,数字和下划线
        let username = "adminA0_90";
        //a.写正则表达式
        let reg6 = /^\w{5,10}$/
        //b.使用正则表达式做校验
        let f6 = reg6.test(username)
        console.log(f6);

        //正则表达式的第二种创建方式(了解)
        let reg6_2 = new RegExp("^\\w{5,10}$")
        let f6_2 = reg6_2.test(username)
        console.log(f6_2);



    </script>

案例2-正则模式

根据不同需求,提供了三种模式,这三种模式分别对应一下三个内容

u:匹配最近的哪一项

g:匹配所有满足的项

i:匹配的时候不考虑大小写

let reg = /abc/i //abc ABC Abc
    <script>
        //正则模式 i:匹配的时候不考虑大小写
        let str = "ABC"
        //写正则表达式,校验一个字符串是否是abc,不考虑大小写
        let reg = /^abc$/i
        //校验
        let r = reg.test(str)
        console.log(r);
    </script>

案例3

image-20230320121329630

    用户名 <input type="text"> <span></span><br>
    密码 <input type="text"> <span></span><br>
    邮箱 <input type="text"> <span></span><br>
    <button type="button">注册</button>

    <script>
        //拿到所有的输入框
        let oinputArr = document.querySelectorAll("input")
        //拿到所有的span标签
        let spArr = document.querySelectorAll("span")
        //拿到按钮
        let btn = document.querySelector("button")

        btn.onclick = function(){
            //获取用户输入的用户名
            let username = oinputArr[0].value
            //写正则表达式
            let reg1 = /^[A-Z][a-zA-Z]{5}$/
            if(reg1.test(username)){
                spArr[0].innerText = "√"
            }else{
                spArr[0].innerText = "用户是6位的字母,首字母必须大写"
            }

            //获取到用户输入的密码
            let password = oinputArr[1].value
            //写正则表达式
            let reg2 = /^\d{6}$/
            if(reg2.test(password)){
                spArr[1].innerText = "√"
            }else{
                spArr[1].innerText = "密码必须是6位的数字"
            }

            //获取用户输入的邮箱
            let email = oinputArr[2].value
            //写正则表达式
            let reg3 = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/
            if(reg3.test(email)){
                spArr[2].innerText = "√"
            }else{
                spArr[2].innerText = "邮箱格式错误"
            }
        }

    </script>

BOM

(Browser Object Model),浏览器对象模型。包含了 页面跳转、页面返回、定时器任务、屏幕的信息(分辨率、大小)等功能

img

在BOM中,有很多对象,我们给对象进行了分类

  1. window对象:浏览器窗口对象
  2. location对象:浏览器url地址对象
  3. history对象:浏览记录对象
  4. screen对象:屏幕对象
  5. navigator对象:浏览器对象(查看浏览器信息)

window对象

console.log(window)

window是浏览器窗口对象,默认是最顶层对象,每个浏览器都有这个对象

案例-演示window对象的方法
    <button id="btn" type="button">打开百度</button>

    <script>
        /**
         * JS由三部分组成
         *  ECMAScript(变量 数组 对象 语句 函数)
         *  DOM(网页内容的操作)
         *  BOM(操作浏览器的各种功能)
         * 
         * 当浏览器打开一个网页的时候,浏览器会自动生成一个window对象
         *  window(浏览器窗口对象)
         *      DOM
         *      BOM
         *          location对象:浏览器地址栏
         *          history对象:浏览期历史记录
         *          screen对象:屏幕对象
         *          avigator对象:浏览器对象(查看浏览器信息)
         * 
        */
        //输出window对象
        console.log(window);

        //弹窗
        window.alert("我是一个弹窗")

        //输入框
        window.prompt("请输入")

        //打开一个新的页面
        let obtn = document.querySelector("#btn")
        obtn.onclick = function(){
            window.open("https://www.baidu.com")
        }

        //确认取消框
        let r = window.confirm("是否删除?")
        console.log(r);
    </script>

知识点

​ alert() 弹窗

​ prompt() 输入框

​ confirm() 确认框

​ open() 打开新窗口的

内置对象

location

image-20221209140308142

    <button id="btn" type="button">刷新网页</button>
    <button id="btn2" type="button">打开百度</button>
    
    <script>
        /**
         * location:代表浏览器地址栏对象
        */
        let obtn = document.querySelector("#btn")
        obtn.onclick = function(){
            //刷新浏览器
            location.reload()
        }

        let obtn2 = document.querySelector("#btn2")
        obtn2.onclick = function(){
            location.assign("https://www.baidu.com")
        }
    </script>
    <button id="btn3" type="button">获取地址栏网址</button>
    <button id="btn4" type="button">打开一个新的网页</button>
        let obtn3 = document.querySelector("#btn3")
        obtn3.onclick = function(){
            //拿到地址栏的网址
            let msg = location.href
            console.log(msg);
        }

        let obtn4 = document.querySelector("#btn4")
        obtn4.onclick = function(){
            //页面跳转(推荐)
            // location.href = "https://www.taobao.com"
            location = "https://www.taobao.com"
        }

常用属性

​ href

​ search

常用函数

​ assign 用于页面跳转,浏览器会有历史记录,可以回退

​ reload 刷新页面

history

image-20221209143322731

    <button id="btn1" type="button">后退</button>
    <button id="btn2" type="button">前进</button>

    <script>
        let obtn1 = document.querySelector("#btn1")
        let obtn2 = document.querySelector("#btn2")

        obtn1.onclick = function(){
            //后退
            history.back()
        }

        obtn2.onclick = function(){
            //前进
            history.forward()
        }
    </script>

定时器和延时器

定时器语法
setInterval()定时执行任务。每隔一段时间,某段代码就会执行一次
setTimeout()延迟执行任务。在指定的时间后再执行任务,只执行一次
定时器
        setInterval(function(){
            console.log("-------------");
        },1000)
延时器
        setTimeout(function(){
            console.log("*********************");
        },500)
清除定时器
clearInterval(要清除的定时器)

案例-时钟

image-20230320171120691

    <span id="sp"></span>
    <script>
        let osp = document.querySelector("#sp")

        setInterval(function(){
            //创建一个日期对象
            let date = new Date()
            //把日期对象转换为本地的日期格式
            let str = date.toLocaleString()
            //把日期插入到sp标签
            osp.innerText = str
        },1000)

    </script>

案例-倒计时

    <span></span>
    <script>
        let time = 3600
        //1.把定时器赋值给一个变量
        let t= setInterval(function(){
            let hour = Math. floor(time / 3600);
            let minute = Math. floor(time % 3600 / 60);
            let second = Math. floor( time % 3600 % 60);

            //如果时分秒是个位数,在前面补0
            hour = hour<10?"0"+hour:hour
            minute = minute<10?"0"+minute:minute
            second = second<10?"0"+second:second

            let str = `${hour}:${minute}:${second}`
            let osp = document.querySelector("span")
            osp.innerText = str

            if(time == 0){
                //2.清除定时器
                clearInterval(t)
            }

            //定时器执行一次,让变量time的值减1
            time--
        },1000)

        // clearInterval(要清除的定时器)
    </script>

案例-发送验证码

<!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>
        /* 初识样式 */
        .btn{
            width: 120px;
            height: 40px;
            border: 1px #06a8ff solid;
            background-color: white;
            color: #06a8ff;
            border-radius: 6px;
        }

        /* 按钮被点击后的样式 */
        .active{
            width: 120px;
            height: 40px;
            border: 1px #d8d8d8 solid;
            color: #999999;
            background-color: #f8f8f8;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <!-- disabled:禁用 -->
    <button id="sendCode"  class="btn"  type="button">发送验证码</button>
    <script>
        //拿到按钮
        let obtn = document.querySelector("#sendCode")
        //给按钮绑定事件
        obtn.onclick = function(){
            //定义变量存储60秒时间
            let time = 60
            //创建一个定时器
            let t = setInterval(function(){
                //把时间插入到按钮的中间
                obtn.innerText = time
                //禁用按钮(给按钮加上disabled)
                obtn.setAttribute("disabled",true)
                // 给标签设置css样式
                obtn.setAttribute("class","active")
                //当时间为0时,清除定时器
                if(time == 0){
                    clearInterval(t)
                    //向按钮中间插入文本
                    obtn.innerText = "发送验证码"
                    //解除禁用(移除按钮的disabled)
                    obtn.removeAttribute("disabled")
                    //给标签设置样式
                    obtn.setAttribute("class","btn")
                }
                //时间减
                time--
            },10)
        }
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值