JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础&实战
学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
笔记来源：在这位大佬的基础上添加了一些东西，欢迎大家支持原创，大佬太棒了：JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础&实战
JavaScript |（四）正则表达式 | 尚硅谷JavaScript基础&实战
- ❤️正则表达式
-
- JavaScript 正则表达式（RegExp）基础
-
- 1️⃣ 创建正则表达式
-
- ✅ 方法 1：使用 `RegExp` 构造函数
- ✅ 方法 2：使用字面量
- 2️⃣ `test()` 方法
- 3️⃣ 常见正则表达式
- 4️⃣ 进阶使用
-
- ✅ 检查字符串是否是纯数字
- ✅ 匹配电话号码
- ✅ 提取字符串中的数字
- ❤️正则表达式字面量方式
- ❤️字符串&正则表达式
-
- JavaScript 字符串操作方法️
-
- 1️⃣ `split()` —— 字符串拆分
- 2️⃣ `search()` —— 查找字符串位置
- 3️⃣ `match()` —— 查找匹配项
- 4️⃣ `replace()` —— 替换字符串
- ❤️正则表达式相关语法
-
- 量词
- 检查开头结尾
- 手机号规则
- 邮件检测
- 检测字符
❤️正则表达式
JavaScript 正则表达式（RegExp）基础
正则表达式（Regular Expressions, RegExp） 用于定义字符串匹配规则，主要用于字符串查找、匹配和替换。
1️⃣ 创建正则表达式
✅ 方法 1：使用 RegExp 构造函数
var reg = new RegExp("a"); // 匹配字符串中是否包含 "a"
console.log(typeof reg); // object
✅ 方法 2：使用字面量
var reg = /a/;
console.log(typeof reg); // object
两种方式的区别：
- 使用
RegExp构造函数时，参数是字符串，特殊字符需要转义var reg1 = new RegExp("\\d+"); // 需要双反斜杠 \\d+ - 使用字面量时，特殊字符不用转义
var reg2 = /\d+/; // 直接 \d+
2️⃣ test() 方法
- 用于检查字符串是否匹配正则表达式
- 如果匹配返回
true，否则返回false
✅ 示例
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️⃣ 进阶使用
✅ 检查字符串是否是纯数字
var reg = /^\d+$/; // ^ 表示开头，$ 表示结尾
console.log(reg.test("12345")); // true
console.log(reg.test("12a45")); // false
✅ 匹配电话号码
var phoneReg = /^1[3-9]\d{9}$/;
console.log(phoneReg.test("13812345678")); // true
console.log(phoneReg.test("11234567890")); // false
✅ 提取字符串中的数字
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]任意数字[^ ]除了
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() —— 字符串拆分
作用：用于拆分字符串，将其转换为数组。
语法：
str.split(separator, limit);
separator：分隔符（可以是字符串或正则表达式）。limit：最大拆分次数（可选）。
✅ 示例
var str = "apple,banana,grape";
console.log(str.split(","));
// ["apple", "banana", "grape"]
var str = "hello world!";
console.log(str.split(""));
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
var str = "a|b|c|d|e";
console.log(str.split("|", 3));
// ["a", "b", "c"]
split() 结合正则
var str = "one-two three_four";
console.log(str.split(/[-_\s]/));
// ["one", "two", "three", "four"]
2️⃣ search() —— 查找字符串位置
作用：在字符串中搜索匹配的子串，返回第一个匹配项的索引，找不到则返回 -1。
语法：
str.search(pattern);
pattern：要搜索的字符串或正则表达式。
✅ 示例
var str = "hello world";
console.log(str.search("world")); // 6
console.log(str.search("hi")); // -1
var str = "I love JavaScript!";
console.log(str.search(/JavaScript/)); // 7
console.log(str.search(/\d/)); // -1（因为没有数字）
3️⃣ match() —— 查找匹配项
作用：使用正则表达式匹配字符串，返回匹配到的内容（数组）。
语法：
str.match(pattern);
pattern：正则表达式。
✅ 示例
var str = "hello world world";
console.log(str.match("world"));
// ["world", index: 6, input: "hello world world", groups: undefined]
var str = "123 abc 456 def";
console.log(str.match(/\d+/g));
// ["123", "456"] （全局匹配数字）
var str = "hello 123, hi 456";
console.log(str.match(/\d+/));
// ["123", index: 6, input: "hello 123, hi 456", groups: undefined]
4️⃣ replace() —— 替换字符串
作用：替换匹配的内容。
语法：
str.replace(pattern, replacement);
pattern：要匹配的内容（可以是字符串或正则表达式）。replacement：替换的新内容。
✅ 示例
var str = "I love JavaScript!";
console.log(str.replace("JavaScript", "Python"));
// "I love Python!"
var str = "apple, banana, grape";
console.log(str.replace(/banana/, "orange"));
// "apple, orange, grape"
var str = "hello 123 world 456";
console.log(str.replace(/\d+/g, "X"));
// "hello X world X"
replace() 结合回调函数
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}
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开头
- 第二位3-9任意数字
- 三位以后任意数字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 = "[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：除了单词边界
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>