一、正则表达式

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

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>

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

  1. java正则任意字符,Java正则表达式常用字符

    [-] 位于括号之内的任意字符 [^-] 不在括号之中的任意字符 . 除了换行符之外的任意字符,等价于[^\n] \w 任何单字字符, 等价于[a-zA-Z0-9] \W 任何非单字字符,等价于[^a ...

  2. 正则表达式——常用正则表达式验证有效数字、密码、真实姓名、邮箱、身份证号码及其正则捕获懒惰性原理

    常用正则表达式及其懒惰性原理 由两部分组成 元字符 量词元字符 * 0到多个 + 1到多个 ? 0到1个 {n} 出现n次 {n,} 出现到多次 {n,m} 出现n到m次 特殊元字符 \ 转义字符(普 ...

  3. java 正则 单个字符_正则表达式教程之匹配单个字符详解

    本文实例讲述了正则表达式教程之匹配单个字符.分享给大家供大家参考,具体如下: 注:在所有例子中正则表达式匹配结果包含在源文本中的[和]之间,有的例子会使用Java来实现,如果是java本身正则表达式的 ...

  4. html正则表达式的书写,前端正则表达式书写及常用的方法

    正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或者从某个串中取出符合某个条件的子串等. 前端正则表 ...

  5. python 正则替换_5分钟速览Python正则表达式常用函数!五分钟就掌握它!

    导读:正则表达式是处理字符串类型的"核武器",不仅速度快,而且功能强大.本文不过多展开正则表达式相关语法,仅简要介绍python中正则表达式常用函数及其使用方法,以作快速查询浏览. ...

  6. 尚硅谷JS笔记-数组的剩余方法、函数的方法 、arguments 、Date、Math、包装类、字符串的相关方法、正则表达式、字符串和正则相关的方法的总结及归纳

    目录 一.数组的剩余方法 二.函数的方法 三.arguments 四.Date 五.Math 六.包装类 七.字符串的相关方法 八.正则表达式 九.正则表达式 十.字符串和正则相关的方法 一.数组的剩 ...

  7. 正则表达式 - 常用的正则表达式级正则的捕获

    常用的正则表达式 验证是否为有效数字 /* * 规则分析 * 1. 可能出现 + - ,也可能不出现 * 2. 一位0-9都可以,多位首位不能为0 * 3.小数部分可能有可能没有,一旦有后面必须有小数 ...

  8. mysql的正则书写规则_MySql中正则表达式的使用方法描述

    MySql中正则表达式的使用方法描述 更新时间:2008年07月30日 08:47:59   作者: 不知道原来mysql支持正则表达式(regex)是定义复杂查询的一个强有力的工具. 这里是一个简单 ...

  9. Python语言学习:Python语言学习之正则表达式常用函数之re.search方法【输出仅一个匹配结果(内容+位置)】、re.findall方法【输出所有匹配结果(内容)】案例集合之详细攻略

    Python语言学习:Python语言学习之正则表达式常用函数之re.search方法[输出仅一个匹配结果(内容+位置)].re.findall方法[输出所有匹配结果(内容)]案例集合之详细攻略 导读 ...

最新文章

  1. php底层实现也是c语言,深入php内核,从底层c语言剖析php实现原理
  2. 【音视频安卓开发 (一)】AndroidStudio项目配置权限、jni库路径、ABI、Cmake
  3. devtools安装_R语言如何批量安装软件包
  4. 微信小程序+.NET(十八) ffmpeg音频转码/拼接/混合
  5. 正点原子开发板STM32F407ZG-基于AD7606进行八路数据采集
  6. 教你用Python做个打飞机小游戏超详细教程
  7. python循环遍历-for循环
  8. 【量化笔记】配对交易
  9. 羊了个羊3D版,迄今我见过还原度最佳游戏!还支持微信授权和教程视频
  10. A quick first look at the kernel printk()
  11. ASP.NET微信快速开发框架源码【源码分享】
  12. Linux中的小知识点
  13. 物联网Lora模块从入门到精通(一)Lora模块初识-新大陆物联网
  14. 企业微信 自建服务器,企业微信单点登录自建系统过程记录
  15. 魅蓝note2手机计算机打开教程,魅蓝Note 2后盖怎么打开?魅蓝Note2打开后盖方法图解...
  16. Revit添加族类型参数
  17. 基于javaweb+JSP+Servlet在线商城鲜花花卉商城(前台、后台)
  18. 修改apk二进制文件工具
  19. rba有哪几個主要組成部分_RBA6.0版标准之E部分-管理体系有哪些具体内容?RBA的管理体系有什...
  20. 【OpenFace】

热门文章

  1. windows字体转移至linux,由 Windows 向 Linux 迁移字体 和 Linux 等宽字体
  2. Hyperledger Fabric链码修改与测试(一)
  3. selenium模拟登陆截取验证码
  4. C语言错误:expected declaration or statement at end of input、编写函数求100万以内的素数
  5. kali教你路由转发
  6. 山东大学软件学院数据结构练习题
  7. python的字符串、列表、元组、字典、集合
  8. 现在学 Prolog 合一和证明搜索
  9. 臀纬痈粕吃种鼗拼舅怂
  10. 汽车电子测试标准:ISO 7637-2 ISO 16750-2