• 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个字母、数字、下划线

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>校验登录title>
    7.     <script>
    8.         function check(){
    9.             var username = document.getElementById('username').value
    10.             var userpass = document.getElementById('userpass').value
    11.             // 登录名5-20个以字母开头、可带数字、"_"、"."的字符串
    12.             var name_regex = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/
    13.             // 密码6-20个字母、数字、下划线
    14.             var pass_regex = /^(\w){6,20}$/
    15.             
    16.             if(username == null || username == '') {
    17.                 document.getElementById('pass').innerHTML = ''
    18.                 document.getElementById('name').innerHTML = '用户名不能为空'
    19.                 return false
    20.             }else if(username.match(name_regex) == null){
    21.                 document.getElementById('pass').innerHTML = ''
    22.                 document.getElementById('name').innerHTML = '登录名5-20个以字母开头、可带数字、"_"、"."的字符串'
    23.                 return false
    24.             }else if(userpass == null || userpass == ''){
    25.                 document.getElementById('name').innerHTML = ''
    26.                 document.getElementById('pass').innerHTML = '密码不能为空'
    27.                 return false
    28.             }else if(userpass.match(pass_regex) == null){
    29.                 document.getElementById('name').innerHTML = ''
    30.                 document.getElementById('pass').innerHTML = '密码6-20个字母、数字、下划线'
    31.                 return false
    32.             }else{
    33.                 alert('登录成功')
    34.                 return true
    35.             } 
    36.         }
    37.     script>
    38. head>
    39. <body>
    40.     <form action="" method="get" onsubmit="return check()">
    41.         username:<input type="text" id="username"><font id="name">font>
    42.         <br>
    43.         userpass:<input type="text" id="userpass"><font id="pass">font>
    44.         <br>
    45.         <input type="submit">
    46.     form>
    47. body>
    48. html>

    浏览器对象模型（BOM）

    window.open()：打开新窗口

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

    window.print()：打印

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

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

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>BOMtitle>
    7. head>
    8. <body>
    9.     <button id="btn1" onclick="alert(window.confirm('你确定要执行此操作吗？'))">确认框button>
    10.     <button id="btn2" onclick="window.close()">关闭窗口button>
    11.     <button id="btn3" onclick="window.open()">打开窗口button>
    12.     <button id="btn4" onclick="window.print()">打印窗口button>
    13.     <button id="btn5" onclick="history.back()">返回上一页button>
    14. body>
    15. html>

    计时

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

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

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

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

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>计时title>
    7.     <script>
    8.         window.onload=function(){
    9.             document.getElementById('btn1').onclick=function(){
    10.                 // 注意：没有加var
    11.                 display_time = setInterval(function(){start_time()}, 1000)
    12.             }
    13.             document.getElementById('btn2').onclick=function(){
    14.                 clearInterval(display_time)
    15.             }
    16.         }
    17.         
    18.         function start_time(){
    19.             var d = new Date()
    20.             var t = d.toLocaleTimeString()
    21.             document.getElementById('time').innerHTML = t
    22.         }
    23.     script>
    24. head>
    25. <body>
    26.     <p id="time">p>
    27.     <button id="btn1">显示时间button>
    28.     <button id="btn2">暂停时间button>
    29. body>
    30. html>

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>计时2title>
    7.     <script>
    8.         function myFunction(){
    9.             tmp = setTimeout(function(){alert('hello!')}, 3000)
    10.         }
    11.         function stopmyFunction(){
    12.             clearTimeout(tmp)
    13.         }
    14.     script>
    15. head>
    16. <body>
    17.     <p>要在3秒前阻止弹窗出现p>
    18.     <button id="btn1" onclick="myFunction()">三秒后出现弹窗button>
    19.     <button id="btn2" onclick="stopmyFunction()">阻止弹窗出现button>
    20. body>
    21. html>

  • 相关阅读:
    Linux常见面试题
    QGis软件 —— 9、QGis - 由点绘制热力图来模拟人流量（绘制点方式、excel导入数据方式）
    JWT快速上手 | 黑马
    JUL日志
    热成像夜视仪和夜视仪的优缺点
    布尔代数介绍
    离线安装Redis集群(redis-6.2.4)
    Time Series Data Augmentation for Deep Learning: A Survey 之论文阅读
    HLS基础issue
    华为OD机试 - 真正的密码 - 数据结构list（Java 2023 B卷 100分）
  • 原文地址：https://blog.csdn.net/m0_46279684/article/details/137903577