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

啦啦右一2023-08-06 10:44

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

文章目录

📚正则表达式

  • 正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来。
  • 创建正则表达式的对象 ：var 变量 = new RegExp("正则表达式","匹配模式");，例如：var reg = new RegExp("a");这个正则表达式可以来检查一个字符串中是否含有a。
  • 使用typeof检查正则对象，会返回object。
  • test()方法：这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则返回true，否则返回false。
html 复制代码 
<!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] 任意数字
    • [^ ] 除了
html 复制代码 
<!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()

  • 可以将一个字符串拆分为一个数组。
  • 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。
  • 这个方法即使不指定全局匹配，也会全都插分。
html 复制代码 
<!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()只会查找第一个，即使设置全局匹配也没用。
html 复制代码 
<!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()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果。
html 复制代码 
<!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.新的内容
    • 默认只会替换第一个
html 复制代码 
<!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>
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}
html 复制代码 
<!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>

🐇检查开头结尾

  • ^ 表示开头
  • $ 表示结尾
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}$

html 复制代码 
<!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}
html 复制代码 
<!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：除了单词边界
html 复制代码 
<!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>


相关推荐
paterWang1 小时前
基于 Python 和 OpenCV 的酒店客房入侵检测系统设计与实现
开发语言·python·opencv
东方佑2 小时前
使用Python和OpenCV实现图像像素压缩与解压
开发语言·python·opencv
天宇&嘘月2 小时前
web第三次作业
前端·javascript·css
我真不会起名字啊2 小时前
“深入浅出”系列之杂谈篇：（3）Qt5和Qt6该学哪个？
开发语言·qt
laimaxgg2 小时前
Qt常用控件之单选按钮QRadioButton
开发语言·c++·qt·ui·qt5
水瓶丫头站住3 小时前
Qt的QStackedWidget样式设置
开发语言·qt
小王不会写code3 小时前
axios
前端·javascript·axios
小钊（求职中）4 小时前
Java开发实习面试笔试题（含答案）
java·开发语言·spring boot·spring·面试·tomcat·maven
luckyext4 小时前
HBuilderX中，VUE生成随机数字，vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
小小码农（找工作版）4 小时前
JavaScript 前端面试 4（作用域链、this）
前端·javascript·面试
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10Page Assist - 本地Deepseek模型 Web UI 的安装和使用