正则表达式、常用的方法、正则字符、定位符、转义字符、分组与反向、元素运动、元素左右运行、运动函数封装
正则表达式、常用的方法、正则字符、定位符、转义字符 、分组与反向、元素运动、元素左右运行、运动函数封装
一、正则表达式
=>是一种模式，用于匹配字符串的模式
javascript 中内置的对象
RegExp
创建正则对象
构造函数方式
let reg=new RegExp('\d+')
字面量方式
let reg=/\d+/
二、正则常用的方法
test：正则去匹配字符串，如果匹配成功就返回真，匹配失败返回假
正则.test(字符串)
=>true|false
function test1(){
const str ='abcdef'//字符串
const reg=/g/ //正则
let isOK=reg.test(str)
alert(isOK)
}
test1()search(查找) 正则去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回-1
字符串.search(正则)
=>索引号
function test2(){
const str='abcdef'
const reg=/c/
let index=str.search(reg)
alert(index)//返回的是下标位置
}
test2()match（匹配）正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null
字符串.match(正则)
=>数组
<script>
const str=' Dgfhfgh254bhku289fgdhdy675gfh'
const reg=/\d+/g //\d+->+限定前面的\d数字出现的次数或更多次-> >=1
let arr=str.match(reg)
console.log(arr)//['254', '289', '675']
</script>replace（替换）正则去匹配字符串，匹配成功的字符被新的字符串替换
字符串.repalce(正则，新字符)
=>替换后新字符串
function test3(){
const str='abcdef'
const reg=/b/
let newStr=str.replace(reg,'*')
console.log(newStr)
}
test3()exec
正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，
index：表示第一个匹配的字符在原字符串中的位置，
input:表示原字符串，
groups：表示当初中命名的分组时匹配到的分组对象；
如果匹配不成功，就返回null
function test4(){
const str='Dgfhfgh254bhku289fgdhdy675gfh'
const reg=/\d+/g
let arr=reg.exec(str)
console.log(arr)
/*
['254', index: 7, input: 'Dgfhfgh254bhku289fgdhdy675gfh', groups: undefined]
匹配成功的数字 第一个数字的下标 原来的字符串 未分组
*/
}
test4()三、正则字符
普通字符
普通字符：a-z A-Z 0-9
const str='abcdef1234'
const reg=/b/
元字符
\d 数字
\w 数字/字符/下划线/汉字
^ 以什么开头
\b单词边界
\n 换行
. 除换行符外的任意字符
\.匹配点
<script>
/*
用正则表达式匹配的是中国的电话号码，以0开头，然后是两个数字，然后是一个连字号“-”，最后是8个数字。
如: 028-88888888
写一个正则表达式，与给定的电话号码字符串匹配，判断是不是满足座机电话号
以0开头，然后是两个数字，然后是一个连字号“-”，最后是8个数字。
*/
const str='028-88888888'
const str1='123-12358987'
const reg= / ^0\d{2}-d{8}$/
let isOK=reg.test(str1)
alert(isOK)
</script>四、定位符
定位符
=>限定匹配字符 开始结束
^once 开始
once$ 结束
<script>
function test1(){
// const str='There once was a man from NewYork this is'
const str = 'once upon a time'
// const reg = /^once/
const reg = /^once/
console.log(reg.test(str))
}
test1()
</script>五、转义字符
n
\n -> 换行
. -> 除换行符外的任意字符
\. -> 匹配.
http://www.xxx.com
const reg = /\./
选择符
|
[a|b]
练习：
1.已知邮箱字符串'zhousir028@qq.com'写正则匹配该邮箱字符串是否符合邮箱格式?
邮箱格式要求:
1. 必须包含@符号
2. @符号左右两边可以字母或数字或字母数字组合
3. 以.com结尾
function test1() {
// const str = 'zhousir028@qq.com'
const str = '3147718205@qq.com'
const reg = /[0-9a-zA-Z]+@[0-9a-zA-Z]+\.com$/
let isOk = reg.test(str)
alert(isOk)
}
// test1()2. 已知密码字符串'Zhousir12345' 写正则匹配密码是否符合密码强度规则?
密码强度规则: 1. 必须是大写字母开头
2. 密码包含字母和数字
3. 至少8位
function test2() {
const str = 'Zhousir12345'
const reg = /^[A-Z][0-9a-zA-Z]{7,}$/
if(reg.test(str)){
alert('正确的密码格式')
}
else{
alert('错误的密码格式')
}
}
// test2()3. 已知手机字符串'18012345678' 匹配中国手机号是否正则
中国手机号规则: 1. 以1开头
2.第二位是 3或5或8
3. 总共11位
function test3(){
const phone='18012345678'
const reg=/^1[3|5|8]\d{9}$/
if(reg.test(str)){
alert('正确的手机格式')
}
else{
alert('错误的手机格式')
}
}
// test3()5. 将字符串中单词is替换成 'are'字符串如下:
'He is a boy, This is a dog.Where is she?'
function test5(){
const str='He is a boy, This is a dog.Where is she?'
const reg=/\bis/g
let newStr=str.replace(reg,'are')
console.log(newStr)
}
test5()六、分组与反向
分组:
const str = 'aabcdef'
const reg = /a+/
const str = 'abcdefabc'
const reg = /(abc)+/g
反向引用
$1 -> abc
const str = '2022-09-05' -> 09/05/2022
const reg = /(\d{4})-(\d{2})-(\d{2})/
$1 $2 $3
$2/$3/$1 -> 09/05/2022
思路： 匹配日期时间，分组后反向引用分组内容重组日期时间格式
<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>七、元素运动
<style>
* {
padding: 0;
margin: 0;
}
div {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style><body>
<div></div>
<script>
const box = document.querySelector('div')
/*
点击区块向右运行200px
*/
function test1() {
let distance = 200
box.addEventListener('click', function () {
box.style.left = `${distance}px`
})
}
// test1()
/*
平滑运动到200距离
*/
function test2() {
box.style.left = window.getComputedStyle(box).left // 获取非行间样式left值作为初始值
let init = parseInt(box.style.left) // 初始位置
let distance = 200 // 移动距离
let goal = init + distance // 目标位置
box.addEventListener('click', function () {
const timer = setInterval(function () {
if (parseInt(box.style.left) == goal) {
clearInterval(timer)
} else {
box.style.left = parseInt(box.style.left) + 20 + 'px'
console.log(box.style.left)
}
}, 50)
})
}
// test2()
/*
计算元素每次运动距离
总距离offsset 每次移动距离?
----- = --------------
总时间1000 每次移动时间-速度 rate
distance = offset * rate / time
*/
function test3() {
box.style.left = window.getComputedStyle(box).left // 获取非行间样式left值作为初始值
let init = parseInt(box.style.left) // 初始位置
let offset = 200 // 偏移量-移动总距离
let time = 1300 // 总时间
let rate = 50 // 速度
let distance = (offset * rate) / time // 每次移动距离
console.log('distance ', distance) // 10
let goal = init + offset // 目标位置 400
box.addEventListener('click', function () {
const timer = setInterval(function () {
if (parseInt(box.style.left) == goal || goal - parseInt(box.style.left) < distance) {
box.style.left = goal + 'px' // 如果当前位置与目标位置的距离小于移动的距离，直接到达目标位置
clearInterval(timer)
} else {
box.style.left = parseInt(box.style.left) + distance + 'px'
console.log(box.style.left)
}
}, rate)
})
}
test3()
</script>八、元素左右运行
<!--
联想: 小区块随光标移动
拖拽案例
元素运动到指定位置
let x = e.offsetX
let y = e.offsetY
box.style.top = y
box.style.left = x
-->
<style>
* {
padding: 0;
margin: 0;
}
div {
position: absolute;
top: 100px;
left: 600px;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style> <body>
<div></div>
<script>
const box = document.querySelector('div')
/*
计算元素每次运动距离
总距离offsset 每次移动距离?
----- = --------------
总时间1000 每次移动时间-速度 rate
distance = offset * rate / time
*/
function test3() {
box.style.left = window.getComputedStyle(box).left // 获取非行间样式left值作为初始值
let init = parseInt(box.style.left) // 初始位置
let offset = 200 // 偏移量-移动总距离, 正的：向右移， 负向左移
let time = 1300 // 总时间
let rate = 50 // 速度
let distance = (offset * rate) / time // 每次移动距离
console.log('distance ', distance) // -10 7
let goal = init + offset // 目标位置 400
box.addEventListener('click', function () {
const timer = setInterval(function () {
if (parseInt(box.style.left) == goal || Math.abs(Math.abs(goal) - Math.abs(parseInt(box.style.left))) < Math.abs(distance)) {
box.style.left = goal + 'px' // 如果当前位置与目标位置的距离小于移动的距离，直接到达目标位置
clearInterval(timer)
} else {
box.style.left = parseInt(box.style.left) + distance + 'px'
console.log(box.style.left)
}
}, rate)
})
}
test3()
</script>
</body>九、运动函数封装
<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> <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>
欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)