正则表达式、常用的方法、正则字符、定位符、转义字符、分组与反向、元素运动、元素左右运行、运动函数封装

一、正则表达式

=>是一种模式，用于匹配字符串的模式

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数字出现的次数或更多次->  >=1let 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+/glet 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 -> 换行

. -> 除换行符外的任意字符

\. -> 匹配.

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/glet 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/2022const 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 = 200box.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                每次移动时间-速度 ratedistance = 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) // 10let goal = init + offset // 目标位置  400box.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.offsetXlet y = e.offsetYbox.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                每次移动时间-速度 ratedistance = 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  7let goal = init + offset // 目标位置  400box.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).leftlet init = parseInt(ele.style.left)// 计算目标位置let goal = init + offsetconst 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>