目录
1.正则表达式
1.概念：
用某种模式去匹配一类字符串的公式
2.定义方法：
显式定义：【构造函数】
let 变量名=new RegExp('正则表达式模式')
隐式定义：【字面量】
let 变量名=/正则表达式模式/
3.常用方法：
1.test
正则去匹配字符串，如果匹配成功就返回真，否则返回假
正则.test(字符串)
2.search
正则去匹配字符串，如果匹配成功就返回成功的位置，否则返回-1
字符串.search(正则)
3.match
正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，否则返回null
字符串.match(正则)
4.replace
正则去匹配字符串，匹配成功的字符串被新的字符串替换
str.replace(正则,新字符串)
5.exec
正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，index：表示第一个匹配的字符在原字符串中的位置，input：表示原字符串，group：表示当初中命令的分组时匹配到的分组对象，如果匹配不成功就返回null
正则.exec(字符串)
4.常用元字符~特殊字符
| 元字符 | 说明 |
| \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>