JavaScript正则表达式

为了方便前端做一些输入验证，我们需要掌握正则表达式。

一、创建正则表达式

1. 使用正则表达式字面量，由包含在斜杠之间的模式组成

   // 验证手机号
   var phoneNumber = /^1[3-9]\d{9}$/;

2. 调用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")); //true

reg = /\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