JavaScript-4.正则表达式、BOM

时间:2024-04-25 21:31:52

正则表达式

正则表达式包含在"/","/"中

开始与结束

^

字符串的开始

$

字符串的结束

例:

  • "^The":表示所有以"The"开始的字符串("There"、"The cat"等)
  • "of despair$":表示所有以"of despair"结尾的字符串
  • "^abc$":表示开始和结尾都是"abc"的字符串
  • "notice":表示任何包含"notice"的字符串

量词(次数)

+

一次/更多

*

没有/更多

?

没有/一次

{}

重复次数的范围

例:

  • "ab*":表示一个字符串有一个a后面跟着零个或若干个b("a"、"ab"、"abbb"……)
  • "ab+":表示一个字符串有一个a后面跟着至少一个b或者更多
  • "ab?":表示一个字符串有一个a后面跟着零个或者一个b
  • "a?b+$":表示在字符串的末尾有零个或一个a跟着一个或几个b
  • "ab{2}":表示一个字符串有一个a跟着2个b("abb")
  • "ab{2,}":表示一个字符串有一个a跟着至少2个b
  • "ab{3,5}":表示一个字符串有一个a跟着3到5个b

查找匹配

x|y

匹配x或y

(x)

匹配括号中的内容

.

匹配任意字符

[xyz]

匹配中括号中的任意一个

[^xyz]

中括号中的一个都不匹配

[a-d]

表示一个字符串包含小写a到d中的一个

[a-zA-Z]

包含大小写的任意一个字母

[0-9]

数字

转义字符

\d

数字

\D

非数字

\n

换行符

\r

回车符

\s

空白字符,包括\n,\r,\f,\t,\v等

\S

非空白字符

\t

制表符

\v

重直制表符

\w

匹配字母,数字或下划线字符

练习

校验登录名:只能输入5-20个以字母开头、可带数字、"_"、"."的字符串

密码:6-20个字母、数字、下划线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校验登录</title>
    <script>
        function check(){
            var username = document.getElementById('username').value
            var userpass = document.getElementById('userpass').value
            // 登录名5-20个以字母开头、可带数字、"_"、"."的字符串
            var name_regex = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/
            // 密码6-20个字母、数字、下划线
            var pass_regex = /^(\w){6,20}$/
            
            if(username == null || username == '') {
                document.getElementById('pass').innerHTML = ''
                document.getElementById('name').innerHTML = '用户名不能为空'
                return false
            }else if(username.match(name_regex) == null){
                document.getElementById('pass').innerHTML = ''
                document.getElementById('name').innerHTML = '登录名5-20个以字母开头、可带数字、"_"、"."的字符串'
                return false
            }else if(userpass == null || userpass == ''){
                document.getElementById('name').innerHTML = ''
                document.getElementById('pass').innerHTML = '密码不能为空'
                return false
            }else if(userpass.match(pass_regex) == null){
                document.getElementById('name').innerHTML = ''
                document.getElementById('pass').innerHTML = '密码6-20个字母、数字、下划线'
                return false
            }else{
                alert('登录成功')
                return true
            } 
        }
    </script>
</head>
<body>
    <form action="" method="get" onsubmit="return check()">
        username:<input type="text" id="username"><font id="name"></font>
        <br>
        userpass:<input type="text" id="userpass"><font id="pass"></font>
        <br>
        <input type="submit">
    </form>
</body>
</html>

浏览器对象模型(BOM)

window.open():打开新窗口

window.close():关闭当前窗口

window.print():打印

history.back():与在浏览器点击后退按钮相同

history.forward():与在浏览器点击向前按钮相同

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM</title>
</head>
<body>
    <button id="btn1" onclick="alert(window.confirm('你确定要执行此操作吗?'))">确认框</button>
    <button id="btn2" onclick="window.close()">关闭窗口</button>
    <button id="btn3" onclick="window.open()">打开窗口</button>
    <button id="btn4" onclick="window.print()">打印窗口</button>
    <button id="btn5" onclick="history.back()">返回上一页</button>
</body>
</html>

计时

setInterval():间隔指定的毫秒数不停地执行指定的代码

setTimeout():暂停指定的毫秒数后执行指定代码

clearInterval():用于停止setInterval()方法执行的函数代码

clearTimeout():用于停止执行setTimeout()

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时</title>
    <script>
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                // 注意:没有加var
                display_time = setInterval(function(){start_time()}, 1000)
            }
            document.getElementById('btn2').onclick=function(){
                clearInterval(display_time)
            }
        }
        
        function start_time(){
            var d = new Date()
            var t = d.toLocaleTimeString()
            document.getElementById('time').innerHTML = t
        }
    </script>
</head>
<body>
    <p id="time"></p>
    <button id="btn1">显示时间</button>
    <button id="btn2">暂停时间</button>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计时2</title>
    <script>
        function myFunction(){
            tmp = setTimeout(function(){alert('hello!')}, 3000)
        }
        function stopmyFunction(){
            clearTimeout(tmp)
        }
    </script>
</head>
<body>
    <p>要在3秒前阻止弹窗出现</p>
    <button id="btn1" onclick="myFunction()">三秒后出现弹窗</button>
    <button id="btn2" onclick="stopmyFunction()">阻止弹窗出现</button>
</body>
</html>