JavaScript-4.正则表达式、BOM

正则表达式

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

开始与结束

^	字符串的开始
$	字符串的结束

例：

"^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>

秒客网