为了方便前端做一些输入验证，我们需要掌握正则表达式。
一、创建正则表达式
- 使用正则表达式字面量，由包含在斜杠之间的模式组成
// 验证手机号 var phoneNumber = /^1[3-9]\d{9}$/; - 调用RegExp对象的构造函数
// 校验是够包含abc var re = new RegExp("abc"); console.log(re); // /abc/
二、使用正则表达式
2.1、reg.test(字符串) 测试字符串是否匹配
一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。包含即可。
var reg = /\d/;
console.log(res.test("abc")); //测试abc是否包含数字，false
2.2、exec()
在字符串中查找匹配的内容，返回一个数组（包含匹配结果和分组信息），如果没有匹配则返回 null。
注意：exec默认只能返回首个匹配项，如果要找到所有的，就要设置全局修饰符g(下边有介绍)，然后去循环exec，直到为null
// 加了()所以是数组
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = regex.exec("Date: 05-10-2023");
console.log(result[0]); // "05-10-2023"（完整匹配）
console.log(result[1]); // "05"（第一个分组）
console.log(result[2]); // "10"（第二个分组）
console.log(result[3]); // "2023"（第三个分组）
2.3 match()
在字符串中查找匹配的内容，返回一个数组（包含匹配结果和分组信息），如果没有匹配则返回 null。
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = "Date: 05-10-2023".match(regex);
console.log(result[0]); // "05-10-2023"（完整匹配）
console.log(result[1]); // "05"（第一个分组）
console.log(result[2]); // "10"（第二个分组）
console.log(result[3]); // "2023"（第三个分组）
2.3、search()
在字符串中查找匹配的内容，返回匹配的起始位置索引，如果没有匹配则返回 -1。
const regex = /world/;
console.log("hello world".search(regex)); // 6
console.log("hello there".search(regex)); // -1
2.5、 replace()
在字符串中查找匹配的内容，并用指定的字符串替换。
仍然是懒惰特性，如果要全部替换，记得加g
const regex = /world/;
const result = "hello world".replace(regex, "there");
console.log(result); // "hello there"
const regex = /(\d{2})-(\d{2})-(\d{4})/;
const result = "Date: 05-10-2023".replace(regex, (match, p1, p2, p3) => {return `${p3}/${p2}/${p1}`; // 2023/10/05
});
console.log(result); // "Date: 2023/10/05"
三、编写正则表达式
3.1、元字符
- 匹配单个字符
| 元字符 | 描述 |
|---|---|
| . | 匹配除换行符（\n）以外的任意单个字符。 |
| \d | 匹配单个任意数字字符（等价于 [0-9]）。 |
| \D | 匹配单个任意非数字字符（等价于 [^0-9]）。 |
| \w | 匹配单个任意字母、数字或下划线（等价于 [a-zA-Z0-9_]）。 |
| \W | 匹配单个任意非字母、数字或下划线的字符（等价于 [^a-zA-Z0-9_]）。 |
| \s | 匹配单个任意空白字符（包括空格、制表符、换行符等）。 |
| \S | 匹配单个任意非空白字符。 |
| [abc] | 匹配方括号内的任意单个字符（例如 a、b 或 c）。 |
| [^abc] | 匹配不在方括号内的任意单个字符（例如非 a、b、c 的字符）。 |
| \. | \.对元字符.进行转义 |
- 匹配多个字符
限制前面的单个字符或者()整体
| 元字符 | 描述 |
|---|---|
| * | 匹配前面的字符 0 次或多次。 |
| + | 匹配前面的字符 1 次或多次。 |
| ? | 匹配前面的字符 0 次或 1 次（表示可选）。 |
| {n} | 匹配前面的字符恰好 n 次。 |
| {n,} | 匹配前面的字符至少 n 次。 |
| {n,m} | 匹配前面的字符至少 n 次，至多 m 次。 |
var reg = /\d+/;console.log(reg.test("abc")); // false
console.log(reg.test("1c")); //true
console.log(reg.test("a12c")); //truereg = /\d?/; //限定0~1个数字 reg = /\d{3}/; //恰好三个数字
console.log(reg.test("1234")); // true
console.log(reg.test("123")); // true
console.log(reg.test("a12")); // false
3.2、边界符
| 元字符 | 描述 |
|---|---|
| ^ | 匹配字符串的开头。 |
| $ | 匹配字符串的结尾。 |
| \b | 匹配单词边界（单词的开头或结尾）。 |
| \B | 匹配非单词边界。 |
// 限制开头结束,
// 测试是否包含这样一个字符串：开头是a， 中间是一位数字，结尾是c
var reg = /^a\dc$/;console.log(reg.test("abc")); //false
console.log(reg.test("a1c")); //true
console.log(reg.test("a12c")); //false
3.3、特殊
| 元字符 | 描述 |
|---|---|
| (abc) | 将 abc 作为一个分组捕获。 |
| (?:abc) | 将 abc 作为一个非捕获分组（不捕获匹配的内容）。 |
| | | 逻辑或，匹配左边或右边的表达式。 |
| \ | 转义字符，用于匹配元字符本身（例如 . 匹配 .）。 |
var reg = /a|b/; //匹配a或b
var reg = /(abc|def)/; // 匹配abc或者def
3.4、 修饰符
| 修饰符 | 描述 |
|---|---|
| i | 忽略大小写匹配。 |
| g | 全局匹配（匹配所有符合条件的结果，而不是仅匹配第一个）。 |
| m | 多行模式，使 ^ 和 $ 匹配每行的开头和结尾。 |
| s | 单行模式，使 . 匹配包括换行符在内的所有字符。 |
| u | 启用 Unicode 匹配（ES6+）。 |
| y | 粘性匹配，从 lastIndex 开始匹配（ES6+）。 |
放在//的后边
var reg = /\d{1,3}/g;
四、两大特性
懒惰：多次调用exec总是匹配第一个，通过g去解决
贪婪：尽可能多的去匹配。通过加一个问号/\d{1,4}?/，表示总是匹配最短的
五、常见示例
https://www.regexp.cn/Regex/CommonRegex
https://fehelper.com/fehelper/regexp/index.html
