前端学习第二阶段Day16

元字符	说明
\d	匹配数字，相当于[0-9]
\D	匹配非数字，相当于[^0-9]
\w	匹配字母或数字或汉字或下划线
\W	匹配任意不是字母、数字、汉字或下划线的字符
\s	匹配任意的空白符，如空格、换行符、制表符等
\S	匹配任意不是空白符的字符
.(点号)	匹配除了换行符以外的任意字符\n
[...]	匹配方括号在的所有字符
[^...]	匹配非方括号中的所有字符

5.连接符-范围

连接符	说明
[0-9]	匹配数字，等价于\d
[a-z]	匹配英文小写字母
[A-Z]	匹配英文大写字母
[0-9a-zA-Z]	匹配数字或英文字母

6.限定符-量词

限定符	说明
+	重复1次或更多次
*	重复0次或更多次（任意次）
？	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次（最少n次）
{n,m}	重复n到m次

7.定位符-边界

定位符	说明
^	限定开始位置的字符
$	限定结尾位置的字符
\b	限定单词（字）边界的字符---空格
\B	限定非单词（字）边界的字符

8.修饰符

1.g:global全文搜索，不添加，搜索到第一个匹配停止

2.i:ignore case 忽略大小写，默认大小写敏感

3.m:multiple lines 多行搜索

9.特殊转义符

\f 匹配换页符

\n 匹配换行符

\r 匹配回车符

\t 匹配制表符

\v 匹配垂直制表符

\\ 匹配\

\" 匹配"

\' 匹配 '

\. 匹配 .

10.优先级顺序

运算符或表达式	说明
\	转义符
()、(?:)、(?=)、[]	圆括号或方括号
*、+、？、{n}、{n,}、{n,m}	限定符
^、$、\b、\B	位置和顺序
\|	选择符、“或”运算

2.贪婪模式与非贪婪模式

1.贪婪模式【默认】

正则引擎尽可能多的重复匹配字符

2.非贪婪模式

正则引擎尽可能少的重复匹配字符。可以用?、+？、？？等

案例：

1.已知邮箱字符串'zhousir028@qq.com'写正则匹配该邮箱字符串是否符合邮箱格式?

邮箱格式要求:

1. 必须包含@符号

2. @符号左右两边可以字母或数字或字母数字组合

3. 以.com结尾

<script>
 function test01(){
        let regs=new RegExp("[0-9a-zA-Z]+@[0-9a-zA-Z]+.com$")
        const str='wuyuling09@qq.com'
        let reg=/[0-9a-zA-Z]+@[0-9a-zA-Z]+\.com$/
        let bool=reg.test(str)
        alert(bool)
        alert(`构造函数${regs.test(str)}`)
    }
   test01()
</script>

2. 将字符串中单词is替换成 'are'字符串如下:

'He is a boy, This is a dog.Where is she?'

<script>
   function test05(){
        const str='He is a boy, This is a dog.Where is she?'
        let reg=/\bis\b/mg
        var str1=str.replace(reg,'are')
        alert(`str: ${str}\n str1:${str1}`)
    }
  test05()
</script>

3.匹配日期时间把年月日---月日年


    <script>
        const str = '2022-09-05'  //-> 09/05/2022
        const reg = /(\d{4})-(\d{2})-(\d{2})/
        let newStr = str.replace(reg,'$2/$3/$1')
        console.log(newStr)

           //数组与反引用
    </script>

4.点击元素块移动----运动函数

<!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>封装运动函数</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			div {
				position: absolute;
				top: 100px;
				left: 600px;
				width: 100px;
				height: 100px;
				background-color: skyblue;
			}
            p{
                position: absolute;
                top: 300px;
                left: 600px;
                width: 80px;
                height: 80px;
                background-color: pink;
            }
		</style>
	</head>
	<body>
		<div></div>
        <p></p>

		<script>
            const divEle = document.querySelector('div')
            divEle.addEventListener('click',function(){
                move(divEle,400) 
            })

            const pEle = document.querySelector('p')
            pEle.addEventListener('click',function(){
                move(pEle,-300)
            })


            /*
              运动函数
              ele 运动元素
              offset 是运动总距离,偏移量  正向右，负向左
            */
			function move(ele, offset) {
				let time = 1000 // 总时间
				let rate = 50 // 速度
				let distance = (offset * rate) / time // 每次移动距离

				//初始化当前位置
				ele.style.left = window.getComputedStyle(ele).left
				let init = parseInt(ele.style.left)

				// 计算目标位置
				let goal = init + offset

				const timer = setInterval(function () {
					if (parseInt(ele.style.left) == goal ||
						Math.abs(Math.abs(goal) - Math.abs(parseInt(ele.style.left))) < Math.abs(distance)
					) {
                        // 如果当前位置与目标位置的距离小于移动的距离，直接到达目标位置
						ele.style.left = goal + 'px' 
						clearInterval(timer)
					} else {
						ele.style.left = parseInt(ele.style.left) + distance + 'px'
					}
				}, rate)
			}
		</script>
	</body>
</html>