JavaScript-4.正则表达式、BOM

news/2024/5/19 4:02:51

正则表达式

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

开始与结束

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

例：

"^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').valuevar 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(){// 注意：没有加vardisplay_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>