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

_Matthew2025-03-22 1:03

学习来源 ：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
笔记来源 ：在这位大佬的基础上添加了一些东西，欢迎大家支持原创，大佬太棒了：JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础&实战

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

  • ❤️正则表达式
    • [🦚JavaScript 正则表达式（RegExp）基础](#🦚JavaScript 正则表达式（RegExp）基础)
      • [1️⃣ 创建正则表达式](#1️⃣ 创建正则表达式)
        • [✅ 方法 1：使用 `RegExp` 构造函数](#✅ 方法 1：使用 RegExp 构造函数)
        • [✅ 方法 2：使用字面量](#✅ 方法 2：使用字面量)
      • [2️⃣ `test()` 方法](#2️⃣ test() 方法)
      • [3️⃣ 常见正则表达式](#3️⃣ 常见正则表达式)
      • [4️⃣ 进阶使用](#4️⃣ 进阶使用)
        • [✅ 检查字符串是否是纯数字](#✅ 检查字符串是否是纯数字)
        • [✅ 匹配电话号码](#✅ 匹配电话号码)
        • [✅ 提取字符串中的数字](#✅ 提取字符串中的数字)
  • ❤️正则表达式字面量方式
  • ❤️字符串&正则表达式
    • [🦚JavaScript 字符串操作方法🛠️](#🦚JavaScript 字符串操作方法🛠️)
      • [1️⃣ `split()` ------ 字符串拆分](#1️⃣ split() —— 字符串拆分)
      • [2️⃣ `search()` ------ 查找字符串位置](#2️⃣ search() —— 查找字符串位置)
      • [3️⃣ `match()` ------ 查找匹配项](#3️⃣ match() —— 查找匹配项)
      • [4️⃣ `replace()` ------ 替换字符串](#4️⃣ replace() —— 替换字符串)
  • ❤️正则表达式相关语法

❤️正则表达式

🦚JavaScript 正则表达式（RegExp）基础

正则表达式（Regular Expressions, RegExp） 用于定义字符串匹配规则，主要用于字符串查找、匹配和替换。

1️⃣ 创建正则表达式

✅ 方法 1：使用 RegExp 构造函数
js 复制代码 
var reg = new RegExp("a");  // 匹配字符串中是否包含 "a"
console.log(typeof reg);     // object
✅ 方法 2：使用字面量
js 复制代码 
var reg = /a/;
console.log(typeof reg); // object

两种方式的区别：

  • 使用 RegExp 构造函数时，参数是字符串，特殊字符需要转义

    js 复制代码 
    var reg1 = new RegExp("\\d+"); // 需要双反斜杠 \\d+

  • 使用字面量时，特殊字符不用转义

    js 复制代码 
    var reg2 = /\d+/; // 直接 \d+

2️⃣ test() 方法

  • 用于检查字符串是否匹配正则表达式
  • 如果匹配返回 true，否则返回 false

✅ 示例

js 复制代码 
var reg = /hello/;
console.log(reg.test("hello world")); // true
console.log(reg.test("hi there"));    // false

3️⃣ 常见正则表达式

规则 表达式 作用
任意字符 . 匹配任意单个字符（除换行符）
数字 \d 匹配 0-9 的任意数字
非数字 \D 匹配非数字字符
字母、数字、下划线 \w 匹配 字母、数字、_
非字母、数字、下划线 \W 匹配 非字母、数字、_
空白字符 \s 匹配空格、换行符等
非空白字符 \S 匹配非空白字符
开头 ^ 以某个字符开头
结尾 $ 以某个字符结尾
多个 + 至少出现一次（1 次或更多）
可选 ? 0 或 1 次
匹配 n 次 {n} 精确匹配 n 次
n 次或以上 {n,} 至少 n 次
匹配范围 [abc] 匹配 a、b 或 c
匹配范围 [a-z] 匹配 a-z 之间的任何字母

4️⃣ 进阶使用

✅ 检查字符串是否是纯数字
js 复制代码 
var reg = /^\d+$/;  // ^ 表示开头，$ 表示结尾
console.log(reg.test("12345")); // true
console.log(reg.test("12a45")); // false
✅ 匹配电话号码
js 复制代码 
var phoneReg = /^1[3-9]\d{9}$/;
console.log(phoneReg.test("13812345678")); // true
console.log(phoneReg.test("11234567890")); // false
✅ 提取字符串中的数字
js 复制代码 
var str = "订单号：123456，总价：99元";
var num = str.match(/\d+/g);
console.log(num); // ["123456", "99"]

总结

  • test() 方法：检测是否匹配
  • 使用 /正则表达式/ 创建正则，更简洁
  • \d、\w、\s 等快捷符号可简化匹配
  • ^ 开头，$ 结尾，确保整个字符串匹配
  • match() 可用于提取符合规则的内容

❤️正则表达式字面量方式

  • 语法：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>

❤️字符串&正则表达式

🦚JavaScript 字符串操作方法🛠️

在 JavaScript 中，字符串对象提供了多个常用方法，split()、search()、match() 和 replace() 主要用于字符串的分割、查找、匹配和替换。👇

1️⃣ split() ------ 字符串拆分

作用 ：用于拆分字符串，将其转换为数组。

📌 语法：

js 复制代码 
str.split(separator, limit);
  • separator：分隔符（可以是字符串或正则表达式）。
  • limit：最大拆分次数（可选）。

✅ 示例

js 复制代码 
var str = "apple,banana,grape";
console.log(str.split(",")); 
// ["apple", "banana", "grape"]
js 复制代码 
var str = "hello world!";
console.log(str.split("")); 
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
js 复制代码 
var str = "a|b|c|d|e";
console.log(str.split("|", 3)); 
// ["a", "b", "c"]

🚀 split() 结合正则

js 复制代码 
var str = "one-two three_four";
console.log(str.split(/[-_\s]/)); 
// ["one", "two", "three", "four"]

2️⃣ search() ------ 查找字符串位置

作用 ：在字符串中搜索匹配的子串 ，返回第一个匹配项的索引 ，找不到则返回 -1。

📌 语法：

js 复制代码 
str.search(pattern);
  • pattern：要搜索的字符串或正则表达式。

✅ 示例

js 复制代码 
var str = "hello world";
console.log(str.search("world")); // 6
console.log(str.search("hi"));    // -1
js 复制代码 
var str = "I love JavaScript!";
console.log(str.search(/JavaScript/)); // 7
console.log(str.search(/\d/)); // -1（因为没有数字）

3️⃣ match() ------ 查找匹配项

作用 ：使用正则表达式匹配字符串 ，返回匹配到的内容（数组）。

📌 语法：

js 复制代码 
str.match(pattern);
  • pattern：正则表达式。

✅ 示例

js 复制代码 
var str = "hello world world";
console.log(str.match("world")); 
// ["world", index: 6, input: "hello world world", groups: undefined]
js 复制代码 
var str = "123 abc 456 def";
console.log(str.match(/\d+/g)); 
// ["123", "456"] （全局匹配数字）
js 复制代码 
var str = "hello 123, hi 456";
console.log(str.match(/\d+/)); 
// ["123", index: 6, input: "hello 123, hi 456", groups: undefined]

4️⃣ replace() ------ 替换字符串

作用 ：替换匹配的内容。

📌 语法：

js 复制代码 
str.replace(pattern, replacement);
  • pattern：要匹配的内容（可以是字符串或正则表达式）。
  • replacement：替换的新内容。

✅ 示例

js 复制代码 
var str = "I love JavaScript!";
console.log(str.replace("JavaScript", "Python")); 
// "I love Python!"
js 复制代码 
var str = "apple, banana, grape";
console.log(str.replace(/banana/, "orange")); 
// "apple, orange, grape"
js 复制代码 
var str = "hello 123 world 456";
console.log(str.replace(/\d+/g, "X")); 
// "hello X world X"

🚀 replace() 结合回调函数

js 复制代码 
var str = "hello 123 world 456";
console.log(str.replace(/\d+/g, function(match) {
    return "[" + match + "]";
}));
// "hello [123] world [456]"

🔥 总结

方法 作用 返回值 用法
split() 按指定分隔符拆分字符串 数组 str.split(",")
search() 查找字符串位置 索引（数值） ，找不到返回 -1 str.search("abc")
match() 查找匹配项 匹配结果数组 str.match(/\d+/g)
replace() 替换字符串 新字符串 str.replace("old", "new")

🚀 用途

  • split() ------ 解析 CSV 文件、拆分字符串。
  • search() ------ 查找子串是否存在。
  • match() ------ 提取特定内容（如提取所有数字）。
  • replace() ------ 替换敏感词、格式化字符串。

🔹 这些方法结合正则表达式使用，功能更加强大！ 🚀

❤️正则表达式相关语法

🦚量词

  • 通过量词可以设置一个内容出现的次数
  • 量词只对它前边的一个内容起作用
  • {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 = "[email protected]";
			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>
相关推荐
烂蜻蜓22 分钟前
深入理解 Vue 3 项目结构与运行机制
前端·javascript·vue.js
癞皮狗不赖皮26 分钟前
WEB攻防- PHP反序列化&属性权限特征&原生类 TIPS&字符串逃逸&CVE 绕过漏洞
开发语言·php
UpUpUp……26 分钟前
C++继承与组合完结
开发语言·c++·笔记
淘小欣28 分钟前
10分钟打造专属AI助手：用ms-swift实现自我认知微调
开发语言·人工智能·ai·swift·模型微调
搬砖工程师Cola1 小时前
＜C#＞ 详细介绍.net 三种依赖注入：AddTransient、AddScoped、AddSingleton 的区别
开发语言·c#·.net
han_hanker1 小时前
一个普通的vue权限管理方案-菜单权限控制
前端·javascript·vue.js
画个逗号给明天"5 小时前
C#从入门到精通（1）
开发语言·c#
JavaPub-rodert5 小时前
golang 的 goroutine 和 channel
开发语言·后端·golang
lly2024065 小时前
Matplotlib 柱形图
开发语言
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06本地部署DeepSeek教程（Mac版本）072 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤08命令行方式将mysql数据库迁移到达梦数据库（全步骤）09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10MySQL（七）MySQL和Oracle、PostgreSQL的区别