JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础实战

news2024/9/28 21:26:25

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

文章目录

  • 📚正则表达式
  • 📚正则表达式字面量方式
  • 📚字符串&正则表达式
    • 🐇split()
    • 🐇search()
    • 🐇match()
    • 🐇replace()
  • 📚正则表达式相关语法
    • 🐇量词
    • 🐇检查开头结尾
    • 🐇手机号规则
    • 🐇邮件检测
    • 🐇检测字符

📚正则表达式

  • 正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。
  • 创建正则表达式的对象：var 变量 = new RegExp("正则表达式","匹配模式");，例如：var reg = new RegExp("a");这个正则表达式可以来检查一个字符串中是否含有a。
  • 使用typeof检查正则对象，会返回object。
  • test()方法：这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//建一个忽略大小写的正则表达式对象，匹配模式为 "ab"
			var reg = new RegExp("ab","i");
			var str = "a";
			var result = reg.test(str);
			// ​"ab"​ 中的 ​"b"​ 并不在字符串 ​"a"​ 中存在，以下同理
			console.log(result);//false
			console.log(reg.test("Ac"));//false
		</script>
	</head>
	<body>
	</body>
</html>

📚正则表达式字面量方式

  • 语法：var 变量 = /正则表达式/匹配模式
  • 使用字面量的方式创建更加简单，使用构造函数创建更加灵活。
  • []里的内容也是或的关系
    • [ab] == a|b
    • [a-z] 任意小写字母
    • [A-Z] 任意大写字母
    • [A-z] 任意字母
    • [0-9] 任意数字
    • [^ ] 除了
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//var reg = new RegExp("a","i");
			var reg = /a/i;
			console.log(reg.test("abc"));//true
			
			//创建一个正则表达式，检查一个字符串中是否有a或b
			//使用 | 表示或者的意思
			reg = /a|b|c/;
			
			//创建一个正则表达式检查一个字符串中是否有字母
			reg = /[A-z]/;
			
			//检查一个字符串中是否含有 abc 或 adc 或 aec
			reg = /a[bde]c/;
			
			//[^ ] 除了
			reg = /[^ab]/;
			reg = /[^0-9]/;
			//包含字母"a"，而不仅仅是数字
			console.log(reg.test("12a3456"));//true
		</script>
	</head>
	<body>
	</body>
</html>

📚字符串&正则表达式

🐇split()

  • 可以将一个字符串拆分为一个数组。
  • 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。
  • 这个方法即使不指定全局匹配，也会全都插分。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var str = "1a2b3c4d5e6f7";
			//根据任意字母来将字符串拆分
			var result = str.split(/[A-z]/);
			console.log(result);
	</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

🐇search()

  • 可以搜索字符串中是否含有指定内容。
  • 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1。
  • 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串。
  • serach()只会查找第一个，即使设置全局匹配也没用。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			str = "hello abc hello aec afc";
			//搜索字符串中是否含有abc 或 aec 或 afc
			result = str.search(/a[bef]c/);
			console.log(result);//6
		</script>
	</head>
	<body>
	</body>
</html>

🐇match()

  • 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。
  • 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索。
  • 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容。
  • 可以为一个正则表达式设置多个匹配模式，且顺序无所谓。
  • match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			str = "1a2a3a4a5e6f7A8B9C";
			result = str.match(/[a-z]/ig);
			console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

🐇replace()

  • 可以将字符串中指定内容替换为新的内容。
  • 参数：
    • 1.被替换的内容，可以接受一个正则表达式作为参数
    • 2.新的内容
    • 默认只会替换第一个
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			str = "1a2a3a4a5e6f7A8B9C";
			result = str.replace(/[a-z]/gi , "@_@");
			console.log(result);
			//1@_@2@_@3@_@4@_@5@_@6@_@7@_@8@_@9@_@
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var str = prompt("请输出任意的内容:");
			str = str.split("").reverse().join("");
			alert(str);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

📚正则表达式相关语法

🐇量词

  • 通过量词可以设置一个内容出现的次数
  • 量词只对它前边的一个内容起作用
  • {n} 正好出现n次
  • {m,n} 出现m~n次
  • {m,} m次以上
  • + 至少一个，相当于{1,}
  • * 0个或多个，相当于{0,}
  • ? 0个或1个，相当于{0,1}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			// 创建一个正则表达式检查一个字符串中是否含有aaa
			var reg = /a{3}/;
			// false，"abbc"中不含有连续的三个'a'
			console.log(reg.test("abbc")); 
			// true，"aaabbc"中含有连续的三个'a'
			console.log(reg.test("aaabbc")); 

			reg = /ab{1,3}c/;
			// true，"abaabbc"中含有'a'后跟着1到3个'b'，再后是'c'
			console.log(reg.test("abaabbc")); 

			reg = /a{3,}c/;
			// false，"aaabbc"中含有连续的三个'a'，但接着是'b'
			console.log(reg.test("aaabbc")); 

			reg = /ab+c/;
			// true，"aaabbc"中含有'a'后跟着至少一个'b'，再后是'c'
			console.log(reg.test("aaabbc")); 

			reg = /ab*c/;
			// true，"aaabbc"中含有'a'后跟着任意个'b'（可能是0个），再后是'c'
			console.log(reg.test("aaabbc")); 

			// false，"aaabbc"中含有'a'，但后跟着不是0或1个'b'，再后是'c'
			reg = /ab?c/;
			console.log(reg.test("aaabbc")); 
		</script>
	</head>
	<body>
	</body>
</html>

🐇检查开头结尾

  • ^ 表示开头
  • $ 表示结尾
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			reg = /^a/; //匹配开头的a
			console.log(reg.test("abcabca"));//true
			reg = /a$/; //匹配结尾的a
			console.log(reg.test("abcabca"));//true
			//如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
			reg = /^a$/;
			console.log(reg.test("bbca"));//false
		</script>
	</head>
	<body>
	</body>
</html>

🐇手机号规则

  1. 以1开头
  2. 第二位3-9任意数字
  3. 三位以后任意数字9个

^1 [3-9] [0-9]{9}$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
			var Str = "13067890123";
			var Str2 = "12345678909"
			var phoneReg = /^1[3-9][0-9]{9}$/;
			console.log(phoneReg.test(Str));//true
			console.log(phoneReg.test(Str2));//false
		</script>
	</head>
	<body>
	</body>
</html>

🐇邮件检测

  • 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
  • \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
			var email = "abc.hello@163.com";
			console.log(emailReg.test(email));//true
		</script>
	</head>
	<body>
	</body>
</html>

🐇检测字符

  • . 表示任意字符
  • 在正则表达式中使用\作为转义字符，\. 来表示.，\\ 表示\
  • 注意：使用构造函数时，由于它的参数是一个字符串，而****是字符串中转义字符，如果要使用\则需要使用\\来代替。
  • \w：任意字母、数字，_ [A-z0-9_]
  • \W：除了字母、数字，_ [^A-z0-9_]
  • \d：任意的数字， [0-9]
  • \D：除了数字， [^0-9]
  • \s：空格
  • \S：除了空格
  • \b：单词边界
  • \B：除了单词边界
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//创建一个正则表达式检查一个字符串中是否含有单词child
			reg = /\bchild\b/;
			console.log(reg.test("hello child "));
			
			//接收一个用户的输入
			var str = prompt("请输入你的用户名:");
			//去除空格
			str = str.replace(/\s/g , "");
			console.log(str);
			//去除开头的空格
			//str = str.replace(/^\s*/, "");
			//去除结尾的空格
			//str = str.replace(/\s*$/, "");
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

机器学习基础知识（1）

机器学习基础知识（1）

什么是机器学习 机器学习是一种通过输入大量数据来构建一种模型&#xff08;网络&#xff09;&#xff0c;这个训练好的模型将会被用来预测或执行某些操作&#xff0c;这个训练的过程和方法就是机器学习。 我们也可以理解为构建一个“函数”&#xff0c;使得这个函数面对我们…
阅读更多...
python+django+mysql项目实践三（用户管理）

python+django+mysql项目实践三（用户管理）

python项目实践 环境说明： Pycharm 开发环境 Django 前端 MySQL 数据库 Navicat 数据库管理 用户列表展示 urls view models html <!DOCTYPE html> <html
阅读更多...
c++ 速度之巅-位图算法，上亿数据的快速操作

c++ 速度之巅-位图算法，上亿数据的快速操作

问题&#xff1a; 有很多不重复的整数&#xff0c;其中最大值不超过40亿&#xff0c;最小值是0&#xff0c;要求判断某个指定的整数&#xff0c;是否在这个集合中。 最快的算法&#xff1a; 使用位图算法 使用2个字节(一个字节八位)&#xff0c;表示16个数&#xff08;0-15&am…
阅读更多...
梯形速度曲线轨迹规划(速度前馈+PID、SCL+ ST代码)

梯形速度曲线轨迹规划(速度前馈+PID、SCL+ ST代码)

S形速度曲线轨迹规划算法和应用详细介绍，请查看下面文章博客，这里不再赘述： S速度曲线轨迹规划(普通变频位置闭环控制算法详细介绍+SCL代码)_RXXW_Dor的博客-CSDN博客位置控制用PD控制器，详细内容介绍请查看下面博客文章：PD控制器算法详细解读_RXXW_Dor的博客-CSDN博客鉴…
阅读更多...
【CSS】倾斜按钮

【CSS】倾斜按钮

效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible" content"IEedge"/><meta name"viewport" content"widthdevice-…
阅读更多...
[JAVAee]锁策略

[JAVAee]锁策略

目录 乐观锁与悲观锁 乐观锁 乐观锁的冲突检测 悲观锁 读锁与写锁 重量级锁与轻量级锁 重量级锁 轻量级锁 自旋锁 公平锁与非公平锁 可重入锁与不可重入锁 乐观锁与悲观锁 乐观锁 在乐观锁中,假设数据并不会发生冲突,在正式提交数据时会对数据进行冲突检测,如果发…
阅读更多...
【2023 华数杯全国大学生数学建模竞赛】 A题 隔热材料的结构优化控制研究 问题分析、模型建立及参考文献

【2023 华数杯全国大学生数学建模竞赛】 A题 隔热材料的结构优化控制研究 问题分析、模型建立及参考文献

【2023 华数杯全国大学生数学建模竞赛】 A题 隔热材料的结构优化控制研究 问题分析、模型建立和参考文献 1 题目 A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性&#xff0c;在航天、军工、石化、建筑、交通等高科技领域中有着广泛的应用。 目前&#…
阅读更多...
【逗老师的PMP学习笔记】4、项目整合管理

【逗老师的PMP学习笔记】4、项目整合管理

目录 一、制定项目章程1、制定项目章程的整体输入、输出和工具技术2、输入2.1、输入-商业文件2.2、输入-协议2.3、输入-事业环境因素组织过程资产 3、工具与技术3.1、专家判断3.2、数据收集3.3、人际关系与团队技能3.4、会议 4、输出4.1、输出-项目章程4.2、输出-假设日志 二、…
阅读更多...
router-view路由出口

router-view路由出口

这边文章主要讲router-view搭建后台管理系统的一个基本模板 一.创建自己的路由规则 1.新建文件夹src/router/index.js npm i vue-router3.6.5 2.配置好文件 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter);// 1.创建…
阅读更多...
软件测试/测试开发：常见面试题与流程篇

软件测试/测试开发：常见面试题与流程篇

本系列文章总结归纳了一些软件测试工程师常见的面试题&#xff0c;主要来源于个人面试遇到的、网络搜集&#xff08;完善&#xff09;、工作日常讨论等&#xff0c;分为以下十个部分&#xff0c;供大家参考。如有错误的地方&#xff0c;欢迎指正。有更多的面试题或面试中遇到的…
阅读更多...
2.4G无线收发芯片XL2409开发板，上手简单，集成 M0+核MCU

2.4G无线收发芯片XL2409开发板，上手简单，集成 M0+核MCU

XL2409开发板是一款基于 2.4G SoC芯片 XL2409的开发工具&#xff0c;为开发者提供了一个快速了解、测试XL2409芯片性能的工具。XL2409开发板可以通过连接JI_LINK&#xff0c;ST_LINK&#xff0c;DAP_LINK进行开发和调试&#xff0c;使用 Keil 开发环境。上手简单&#xff0c;烧…
阅读更多...
【LeetCode】094. 分割回文串II

【LeetCode】094. 分割回文串II

文章目录 1. 解题思路1.1 创建dp表1.2 状态转移方程1.3 提前求出所有子串是否是回文串 2. 整体代码 1. 解题思路 1.1 创建dp表 这道题我们使用动态规划的方法来解&#xff0c;首先创建一个大小为字符串长度的dp表。dp[i] 表示 s[0, i] 的字符串最小划分多少次可以全划分为回文…
阅读更多...
Linux QQ v3.1.2 2023.5.30 版本安装和体验

Linux QQ v3.1.2 2023.5.30 版本安装和体验

新电脑首次登陆需要手机扫码。 功能的确比2.x&#xff0c;1.x的时候强了很多。 官方地址&#xff1a; https://im.qq.com/linuxqq/index.shtml 如果连QQ都非常好的支持Linux了&#xff0c;那么说明使用Linux的人群真得非常多了。 ubuntu linuxqq_3.1.2-13107_amd64.deb 12…
阅读更多...
随机RSI震荡指标公式(StochRSI)，RSI和KDJ二合一

随机RSI震荡指标公式(StochRSI)，RSI和KDJ二合一

随机RSI震荡指标(StochRSI)是由图莎尔钱德和斯坦利克罗发明的一种摆动指标&#xff0c;结合了相对强弱指标&#xff08;RSI&#xff09;和随机指标&#xff08;KDJ&#xff09;的原理&#xff0c;目的是提高灵敏度&#xff0c;解决RSI难以达到超买超卖区的问题&#xff0c;以便…
阅读更多...
Hopfield神经网络求解旅行商(TSP)问题matlab代码

Hopfield神经网络求解旅行商(TSP)问题matlab代码

1案例背景 1.1连续Hopfield神经网络概述 1.网络结构 连续Hopfield神经网络(Continuous Hopfield Neural Network,CHNN)的拓扑结构和离散Hopfield神经网络的结构类似,如图11-1所示。连续Hopfield网络和离散Hopfield 网络的不同点在于其传递函数不是阶跃函数,而是连续函…
阅读更多...
C++ 用vector创建数组对象

C++ 用vector创建数组对象

C标准库提供了被封装的动态数组——vector&#xff0c;而且这种被封装的数组可以具有各种类型&#xff0c;这就使我们免去了一些重复性工作。 vector不是一类&#xff0c;而是一个类模板。 1. vector定义动态数组的形式为 vector<元素类型>数组对象名(数组长度);尖括号…
阅读更多...
Windows下QT Creator安装MinGW 32bit编译器

Windows下QT Creator安装MinGW 32bit编译器

前言 注&#xff1a;本作者是基于FFmpeg开发需要&#xff0c;故在Windows下QT Creator中安装MinGW 32bit编译器&#xff01;其它型号编译器参照此文章基本可以实现&#xff01; 一、下载需要的编译器 1、下载链接 链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/…
阅读更多...
sql 关联了2张表的 update 语句（转）

sql 关联了2张表的 update 语句（转）

转自&#xff1a;SQL Update&#xff1a;使用一个表的数据更新另一张表 、update 关联两个表 基本上 select 能支持的关联和子查询操作&#xff0c;都能在 update 语句中使用。 在 where 条件中使用子查询 update a set a.age 1 where id in (select device_id from b) 在 wher…
阅读更多...
Django调研

Django调研

1. Django 简介 基本介绍 Django 是一个由 Python 编写的一个开放源代码的 Web 应用框架。 使用 Django&#xff0c;只要很少的代码&#xff0c;Python 的程序开发人员就可以轻松地完成一个正式网站所需要的大部分内容&#xff0c;并进一步开发出全功能的 Web 服务 Django 本…
阅读更多...
【Spring练习项目】博客系统

【Spring练习项目】博客系统

目录 1.项目展示2.项目结构设计3.项目功能设计4 数据库准备4.1 建表4.2 DB相关数据 5.项目模块6.添加项目公共模块6.1 common6.2 实现前端界面 7.功能实现7.1实现博客列表约定前后端交互接口实现服务器代码实现客户端代码 7.2实现博客详情约定前后端交互接口实现服务器代码实现…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023