02_正则表达式的应用

本课目标

  • 理解正则表达式概述
  • 掌握Js的正则对象Regexp
  • 掌握正则表达式的常见用法
  • 完成页面注册的手机号码校验

1. 正则表达式概述

  • 官方文档：正则表达式 - JavaScript | MDN

  • 正则表达式在线测试

1.1 正则表达式的定义

  • 介绍：正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。

  • 正则表达式，又称规则表达式,（Regular Expression，在代码中常简写为regex、regexp或RE），是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"），是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串，通常被用来检索、替换那些符合某个模式（规则）的文本。

  • 总结：就是用来做规则判断的（比如我们给一个规则，然后判断用户输入的字符串是否符合该规则）。

  • 如何使用正则表达式：

方法描述
exec一个在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）。
test一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。
match一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。
matchAll一个在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）。
search一个在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回 -1。
replace一个在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串。
split一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。

2. 正则表达式在js中的使用

2.1 正则表达式的基本用法

  • 课堂案例：01.如何定义正则表达式.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* RegExp:正则表达式对象/abc/：正则表达式需要包裹在  / 中间   /*///定义的规则：判断一个字符串是否包含  abc//方式一：使用 new 关键字创建const regExObj = new RegExp(/abc/);// console.log(regExObj)// console.dir(regExObj)//方式二：基于字面量的方式定义，和通过new关键字的方式是一样的const regExObj2 = /aa/;//	一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。//  regexObj.test(str)console.log(regExObj.test("abaa"))      //falseconsole.log(regExObj.test("abc"))       //trueconsole.log(regExObj.test("abcd"))      //trueconsole.log(regExObj.test("dabc"))      //trueconsole.log(regExObj2.test("aa"))       //trueconsole.log(regExObj2.test("bba"))      //falseconsole.log(regExObj2.test("aabbcc"))   //true</script>
</body>
</html>

2.2 正则表达式中的边界符

  • 课堂案例：02.边界符与开始和结束的理解.html

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>/* /abc/： / 表示的是边界符，有转义的效果*/const rg = /a/;/* 开始符号与结束符号的限制需求：以xxx开始，以xxx结束^ 匹配输入的开始$ 匹配输入的结束*/const rg1 = /^a/console.log(rg1.test("abc"))console.log(rg1.test("aabc"))console.log(rg1.test("bcd"))console.log("------")const rg2 = /^abab$/         //只能以a开始，以b结束，中间只能是baconsole.log(rg2.test("abc"))console.log(rg2.test("aabc"))console.log(rg2.test("abcccab"))console.log(rg2.test("aab"))console.log("---------")const rg3 = /^a.b$/         //  .  可以匹配任意字符 除换行符console.log(rg3.test("abbb"))console.log(rg3.test("aabc"))console.log(rg3.test("aba"))console.log(rg3.test("acb"))</script>
</body></html>

2.3 正则表达式中的中括号

  • 课堂案例：03.字符集合之中括号.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* /[abc]/:表示只要匹配 [] 中的任意一个就可以了*/const rg = /[abc]/;console.log(rg.test('abcaa'))       //trueconsole.log(rg.test("aaacccbbabc"))     //trueconsole.log(rg.test("a xbc"))     //trueconsole.log(rg.test("a"))     //trueconsole.log(rg.test("f"))     //flaseconsole.log("-------------")/* 从开始到结束只能够包含abc当中的其中一个*/const rg2 = /^[abc]$/console.log(rg2.test("abc"))       //false   开始和结束只能是其中的一个，不能是全部console.log(rg2.test("a"))console.log(rg2.test("b"))console.log(rg2.test("c"))console.log(rg2.test("ajjja"))
console.log("-----------")/* 匹配：a-z  -> 简写[a-z]*/const rg3 = /^[a-z]$/console.log(rg3.test("a"))console.log(rg3.test("abs"))console.log(rg3.test("c"))console.log(rg3.test("aa"))
console.log("-----------")/* /w  匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。/d  匹配一个数字。等价于 [0-9]。/W  匹配一个非单字字符。等价于 [^A-Za-z0-9_]。\D  匹配一个非数字字符。等价于 [^0-9]。总结：如果在[] 中出现 ^ ，表示取反的意思，出现在[]外面和里面是两个意思*///    const rg4 = /^[a-zA-Z0-9_]$///    const rg4 = /^[\w]$/const rg4 = /^[\W]$/console.log(rg4.test("a"))console.log(rg4.test("_"))console.log(rg4.test("E"))console.log(rg4.test("0"))console.log(rg4.test("-"))</script>
</body>
</html>

2.4 特殊字符与大括号

  • 课堂案例：04.特殊字符与大括号.html

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>/* 特殊字符：*： 匹配前一个表达式 0 次或多次。等价于 {0,}。          >= 0+:  匹配前面一个表达式 1 次或者多次。等价于 {1,}。      >= 1?:  匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。    0,1*///   const rg = /^a$/;//   const rg = /^a*$/;const rg = /bo*/;console.log(rg.test("a"))console.log(rg.test("aa"))console.log(rg.test("A ghost boooooed"))console.log(rg.test("A bird warbled"))console.log("-----------")const rg1 = /a+/console.log(rg1.test("candy"))console.log(rg1.test("caaaaaaaaaandy"))console.log("-----------")const rg2 = /e?le?/ // e 可有可无console.log(rg2.test("angel")) //elconsole.log(rg2.test("angle")) //lconsole.log("------------------")/* {n}:    n 是一个正整数，匹配了前面一个字符刚好出现了 n 次。{n,}:   n 是一个正整数，匹配前一个字符至少出现了 n 次。           >=n{n,m}:  n 和 m 都是整数。匹配前面的字符至少 n 次，最多 m 次。如果 n 或者 m 的值是 0，这个值被忽略。*/const rg3 = /a{2}/console.log(rg3.test("candy")) //falseconsole.log(rg3.test("caandy")) //aaconsole.log("------------")const rg4 = /a{1,3}/        //满足就trueconsole.log(rg4.test("candy")) //aconsole.log(rg4.test("caaaandy")) // console.log("------------")const rg5 = /^a{3,10}$/     //必须在范围里是trueconsole.log(rg5.test("a")) //console.log(rg5.test("aa")) //console.log(rg5.test("aaa")) //console.log(rg5.test("aaaa")) //console.log(rg5.test("aaaaa")) //console.log(rg5.test("aaaaaaaaaaa")) // </script></body></html>

2.5 小括号的使用

  • 课堂案例：05.小括号的使用.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script>/* ()：括号里的内容会被当作整体进行匹配*/const rg = /^(abc){2}$/        //abc  作为一个整体出现2次console.log(rg.test("abc"))        //falseconsole.log(rg.test("abcabc"))     //trueconsole.log(rg.test("abca"))       //falseconsole.log(rg.test("abcdd"))      //falseconsole.log(rg.test("abcabcabc"))  //false</script>
</body>
</html>

2.6 课堂案例

  • 课堂案例：06.课堂案例.html

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>span {font-size: 15px;}.right {color: green;}.error {color: red;}</style>
</head><body><input type="text" class="input1"><span class="msg1">请输入用户名</span><br><br><input type="text" class="input2"><span class="msg2">请输入用户名</span><br><br><input type="text" class="input3"><span class="msg3">请输入邮箱</span><script>const input1Obj = document.querySelector(".input1")const input2Obj = document.querySelector(".input2")const input3Obj = document.querySelector(".input3")const msg1Obj = document.querySelector(".msg1")const msg2Obj = document.querySelector(".msg2")const msg3Obj = document.querySelector(".msg3")//验证用户名的正则const re1 = /^[\w]{6,10}$/;//验证手机号的正则,第一位是1 后面的10位是0-9const re2 = /^[1](50|35|39)[\d]{8}$/ //不加上 $ 限制结尾，就是只要超过10的都满足条件//验证邮箱的正则const re3 = /^[\w]@.com$/// const re3 = /^[\w]{3,8}@(qq|163).com$/input1Obj.addEventListener("blur", function () {//对用户名进行校验if (re1.test(this.value)) {//满足条件msg1Obj.className = 'right'msg1Obj.innerHTML = "输入正确"} else {msg1Obj.className = 'error'msg1Obj.innerHTML = "输入错误"}})input2Obj.addEventListener("blur", function () {//对手机号进行校验if (re2.test(this.value)) {//满足条件msg2Obj.className = 'right'msg2Obj.innerHTML = "输入正确"} else {msg2Obj.className = 'error'msg2Obj.innerHTML = "输入错误"}})input3Obj.addEventListener("blur", function () {//对手机号进行校验if (re3.test(this.value)) {//满足条件msg3Obj.className = 'right'msg3Obj.innerHTML = "输入正确"} else {msg3Obj.className = 'error'msg3Obj.innerHTML = "输入错误"}})</script>
</body></html>

3. 扩展加强

  • 课堂案例：07.replace使用正则.html

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>论坛：<div></div><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><script>/* 需求：需要对发布的信息中关键字进行过滤*/const divObj = document.querySelector("div")const textareaObj = document.querySelector("textarea")const btnObj = document.querySelector("button")//对发布的信息过滤btnObj.addEventListener("click",function(){/* g:表示全局替换i：忽略大小写*/divObj.innerHTML = textareaObj.value.replace(/卧槽|傻瓜|sb/gi,'**')})/* 需求2：通过正则实现如下需求日期：2022-11-12像输出结果为：12-11-2022*/const re1 = /(\d{4})-(\d{2})-(\d{2})/const strDate = "2022-12-31"/* 分别代表括号内的内容$1 =(\d{4}) $2 =(\d{2}) $3 =(\d{2}) *///方式一const result = strDate.replace(re1,"$3/$2/$1")//   const result = strDate.replace(re1,"$3-$2-$1")//   const result = strDate.replace(re1,"$3*$2*$1")console.log(result)//方式二const result2 =  strDate.replace(re1,function(){return RegExp.$3+"-"+RegExp.$2+"-"+RegExp.$1})console.log(result2)//方式三const result3 =  strDate.replace(re1,function(match,year,month,day){console.log("match = "+match)         //第一个参数输出原来的数console.log("year = "+year)console.log("mouth = "+month)console.log("day = "+day)return day+"-"+month+"-"+year;})console.log(result3)</script>
</body>
</html>

  • 课堂案例：08.match方法.html

  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><script>/* match方法:  一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。*/const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';const regex = /[A-Z]/g;const found = paragraph.match(regex);console.log(found);// Expected output: Array ["T", "I"]</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/643498.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

# 安徽锐锋科技IDMS系统简介

# 安徽锐锋科技IDMS系统简介

IDMS 由安徽锐锋科技独立开发 该系统负责和海算以及UE\UNITY的无缝衔接并具备远程数据库访问、高速数据库的自动创建及数据存储、支持MQTT等多种物联网接口&#xff0c;支持多种算法。主要完成由于物料、人员、生产、故障、不良异常、订单异常带来的生产损失&#xff0c;通过海…
阅读更多...
macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例 一&#xff1a; 简介 Socket 是 网络传输的抽象概念。 一般我们常用的有Tcp Socket和 UDP Scoket&#xff0c; 和类Unix 系统&#xff08;包括Mac&#xff09;独有的 Unix Domain Socket&#xff08;UDS&#xff09;。 Tcp Socket 能够…
阅读更多...
国内免费chartGPT网站汇总

国内免费chartGPT网站汇总

https://s.suolj.com - &#xff08;支持文心、科大讯飞、智谱等国内大语言模型&#xff0c;Midjourney绘画、语音对讲、聊天插件&#xff09;国内可以直连&#xff0c;响应速度很快 很稳定 https://seboai.github.io - 国内可以直连&#xff0c;响应速度很快 很稳定 http://gp…
阅读更多...
web安全学习笔记【05】——反弹Shell、正反向连接

web安全学习笔记【05】——反弹Shell、正反向连接

思维导图 #知识点&#xff1a; 1、Web常规-系统&中间件&数据库&源码等 2、Web其他-前后端&软件&Docker&分配站等 3、Web拓展-CDN&WAF&OSS&反向&负载均衡等 ----------------------------------- 1、APP架构-封装&原生态&H5&am…
阅读更多...
解决TCP粘包问题

解决TCP粘包问题

粘包问题已经在上一篇博客中写到具体可以看----------- 以下是利用分包解决粘包问题的步骤&#xff1a; 消息长度前缀&#xff1a; 在每个数据包前加入消息长度信息。 定义协议格式&#xff1a; 明确定义通信协议的格式&#xff0c;包括消息头和消息体。 封包&#xff1a; 将…
阅读更多...
Java研学-代理模式

Java研学-代理模式

一 概述 1 分类 静态代理&#xff1a;在程序运行前就已经存在代理类的字节码文件&#xff0c;代理对象和真实对象的关系在运行前就确定了。&#xff08;代理类及对象要自行创建&#xff09;   动态代理&#xff1a;代理类是在程序运行期间由 JVM 通过反射等机制动态的生成的…
阅读更多...
GBASE南大通用数据库GBase 8s常见问题讲堂 -- 字符集的设置

GBASE南大通用数据库GBase 8s常见问题讲堂 -- 字符集的设置

本文摘自GBASE南大通用社区&#xff0c;by&#xff1a;wty&#xff0c;原文请点击&#xff1a;GBase 8s常见问题 -- 字符集相关问题|GBASE社区|天津南大通用数据技术股份有限公司|GBASE-致力于成为用户最信赖的数据库产品供应商 23103 Code-set conversion function failed …
阅读更多...
电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

在数字时代&#xff0c;数据就是一切。从珍贵的家庭照片和重要的工作文档到最喜欢的音乐和电影&#xff0c;我们的生活越来越多地存储在各种设备上。系统崩溃、意外删除或恶意病毒都可能使您的宝贵数据瞬间消失。这就是数据恢复工具的用武之地。 十大电脑数据恢复软件排行 这些…
阅读更多...
python面试题大全（四）

python面试题大全（四）

数据结构与算法 1. 数组中出现次数超过一半的数字 def find_majority_element(nums):count 0candidate None# 遍历数组&#xff0c;找出可能的候选众数for num in nums:if count 0:candidate numcount 1elif num candidate:count 1else:count - 1# 验证候选众数是否为…
阅读更多...
Integer.valueOf方法详解

Integer.valueOf方法详解

Integer.valueOf 是 Java 中 Integer 类的一个静态方法&#xff0c;它用于将给定的字符串或基本数据类型转换成一个 Integer 对象。 使用场景 从字符串转换&#xff1a;将字符串形式的数字转换为 Integer 对象。 Integer num Integer.valueOf("123");从基本数据类…
阅读更多...
论文阅读2---多线激光lidar内参标定原理

论文阅读2---多线激光lidar内参标定原理

前言&#xff1a;该论文介绍多线激光lidar的标定内参的原理&#xff0c;有兴趣的&#xff0c;可研读原论文。 1、标定参数 rotCorrection&#xff1a;旋转修正角&#xff0c;每束激光的方位角偏移&#xff08;与当前旋转角度的偏移&#xff0c;正值表示激光束逆时针旋转&…
阅读更多...
关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

几年前,公司买了台国产贴片机,里面的主程序是QT编写,运行在WINDOW XP系统上。主程序打开的界面,如图: 我来简单介绍下程序界面,各位读者不需要搞明白功能,只要知道大体的流程即可。 分析主界面: 一、左边的列表&#xff1a; 贴片生产文件,里面包括了贴片时元器件的坐标、飞达…
阅读更多...
C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

1.功能描述 接收串口数据&#xff0c;并将收到的十六进制数据用坐标系的方式将数据波形展示出来 2.代码部分 步骤1&#xff1a;定义链表&#xff0c;用于数据保存 //数据结构-线性链表private List<byte> DataList new List<byte>(); 步骤2&#xff1a;定义波…
阅读更多...
shell脚本2

shell脚本2

在自定义变量当中&#xff0c;不可以以数字开头 变量追加值 在变量名后要写的东西 read -p &#xff1a;交互式输入变量值&#xff0c;然后使用变量 自定义变量 export 全局变量 如果想要bash里面的所有进程都能看见变量&#xff0c;加入export 父进程 子进程…
阅读更多...
计算机毕业设计 基于SpringBoot的民宿租赁系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于SpringBoot的民宿租赁系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
Sentinel 新版本发布，提升配置灵活性以及可观测配套

Sentinel 新版本发布，提升配置灵活性以及可观测配套

作者&#xff1a;屿山 基本介绍 Sentinel 是阿里巴巴集团开源的&#xff0c;面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;承接了阿里巴巴近 15 年的双十一大促流量的核心场景&#xff0c;例如秒杀、冷启动、消息削峰填谷、集群流量控制、实时熔断下游不可用服…
阅读更多...
高性能短URL服务实现

高性能短URL服务实现

概述 大家应该在工作或者生活过程中也经常遇到段url&#xff0c; 类似于&#xff1a; https://v.douyin.com/62WmX3o/。那他的好处是什么呢&#xff1f;为什么使用短url? 短url的好处有 1、 短ur许多平台(微博)有字数限制,太长的链接加进去都没有办法写正文了2、 好看. 比起…
阅读更多...
考研C语言刷题基础篇之分支循环结构基础（二）

考研C语言刷题基础篇之分支循环结构基础（二）

目录 第一题分数求和 第二题&#xff1a;求10 个整数中最大值 第三题&#xff1a;在屏幕上输出9*9乘法口诀表 第四题&#xff1a;写一个代码&#xff1a;打印100~200之间的素数 第五题&#xff1a;求斐波那契数的第N个数 斐波那契数的概念&#xff1a;前两个数相加等于第三…
阅读更多...
ChatGPT目前的AI一哥

ChatGPT目前的AI一哥

ChatGPT和文心一言是两个不同的AI助手&#xff0c;各自有其独特的特点和应用场景。以下是对它们在智能回复、语言准确性和知识库丰富度等方面的简要比较&#xff1a; 智能回复&#xff1a;ChatGPT是由OpenAI开发的语言模型&#xff0c;具有强大的自然语言处理和生成能力&#x…
阅读更多...
2023 工业 AR 关键词：纵深和开拓

2023 工业 AR 关键词：纵深和开拓

2023 年&#xff0c;以虚实融合、工业元宇宙为代表的“新数字化”升级在工业制造领域达成共识。 ▲五部委联合印发元宇宙行动计划 通过发展元宇宙赋能新型工业化 而相对过去几年的行业渗透广、落地场景多样的 AR 业务拓展与合作&#xff0c;#纵深和#开拓&#xff0c;成为 2023…
阅读更多...
最新文章

Copyright @ 2022~2023