正则表达式、常用的方法、正则字符、定位符、转义字符、分组与反向、元素运动、元素左右运行、运动函数封装
一、正则表达式
=>是一种模式,用于匹配字符串的模式
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
\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>
正则表达式、常用的方法、正则字符、定位符、转义字符、分组与反向、元素运动、元素左右运行、运动函数封装相关推荐
- java正则任意字符,Java正则表达式常用字符
[-] 位于括号之内的任意字符 [^-] 不在括号之中的任意字符 . 除了换行符之外的任意字符,等价于[^\n] \w 任何单字字符, 等价于[a-zA-Z0-9] \W 任何非单字字符,等价于[^a ...
- 正则表达式——常用正则表达式验证有效数字、密码、真实姓名、邮箱、身份证号码及其正则捕获懒惰性原理
常用正则表达式及其懒惰性原理 由两部分组成 元字符 量词元字符 * 0到多个 + 1到多个 ? 0到1个 {n} 出现n次 {n,} 出现到多次 {n,m} 出现n到m次 特殊元字符 \ 转义字符(普 ...
- java 正则 单个字符_正则表达式教程之匹配单个字符详解
本文实例讲述了正则表达式教程之匹配单个字符.分享给大家供大家参考,具体如下: 注:在所有例子中正则表达式匹配结果包含在源文本中的[和]之间,有的例子会使用Java来实现,如果是java本身正则表达式的 ...
- html正则表达式的书写,前端正则表达式书写及常用的方法
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个条件的子串等. 前端正则表 ...
- python 正则替换_5分钟速览Python正则表达式常用函数!五分钟就掌握它!
导读:正则表达式是处理字符串类型的"核武器",不仅速度快,而且功能强大.本文不过多展开正则表达式相关语法,仅简要介绍python中正则表达式常用函数及其使用方法,以作快速查询浏览. ...
- 尚硅谷JS笔记-数组的剩余方法、函数的方法 、arguments 、Date、Math、包装类、字符串的相关方法、正则表达式、字符串和正则相关的方法的总结及归纳
目录 一.数组的剩余方法 二.函数的方法 三.arguments 四.Date 五.Math 六.包装类 七.字符串的相关方法 八.正则表达式 九.正则表达式 十.字符串和正则相关的方法 一.数组的剩 ...
- 正则表达式 - 常用的正则表达式级正则的捕获
常用的正则表达式 验证是否为有效数字 /* * 规则分析 * 1. 可能出现 + - ,也可能不出现 * 2. 一位0-9都可以,多位首位不能为0 * 3.小数部分可能有可能没有,一旦有后面必须有小数 ...
- mysql的正则书写规则_MySql中正则表达式的使用方法描述
MySql中正则表达式的使用方法描述 更新时间:2008年07月30日 08:47:59 作者: 不知道原来mysql支持正则表达式(regex)是定义复杂查询的一个强有力的工具. 这里是一个简单 ...
- Python语言学习:Python语言学习之正则表达式常用函数之re.search方法【输出仅一个匹配结果(内容+位置)】、re.findall方法【输出所有匹配结果(内容)】案例集合之详细攻略
Python语言学习:Python语言学习之正则表达式常用函数之re.search方法[输出仅一个匹配结果(内容+位置)].re.findall方法[输出所有匹配结果(内容)]案例集合之详细攻略 导读 ...
最新文章
- php底层实现也是c语言,深入php内核,从底层c语言剖析php实现原理
- 【音视频安卓开发 (一)】AndroidStudio项目配置权限、jni库路径、ABI、Cmake
- devtools安装_R语言如何批量安装软件包
- 微信小程序+.NET(十八) ffmpeg音频转码/拼接/混合
- 正点原子开发板STM32F407ZG-基于AD7606进行八路数据采集
- 教你用Python做个打飞机小游戏超详细教程
- python循环遍历-for循环
- 【量化笔记】配对交易
- 羊了个羊3D版,迄今我见过还原度最佳游戏!还支持微信授权和教程视频
- A quick first look at the kernel printk()
- ASP.NET微信快速开发框架源码【源码分享】
- Linux中的小知识点
- 物联网Lora模块从入门到精通(一)Lora模块初识-新大陆物联网
- 企业微信 自建服务器,企业微信单点登录自建系统过程记录
- 魅蓝note2手机计算机打开教程,魅蓝Note 2后盖怎么打开?魅蓝Note2打开后盖方法图解...
- Revit添加族类型参数
- 基于javaweb+JSP+Servlet在线商城鲜花花卉商城(前台、后台)
- 修改apk二进制文件工具
- rba有哪几個主要組成部分_RBA6.0版标准之E部分-管理体系有哪些具体内容?RBA的管理体系有什...
- 【OpenFace】