正则表达式问题绝对称得上是前端面试中的热门问题，来看看 高祥安 同学给的答案吧~
一、正则表达式
正则表达式（regular expression）是一个描述字符模式的对象。在JavaScript中，正则表达式用RegExp对象表示，语法是Perl5的正则表达式语法的子集（所以，一些小伙伴在其他语言熟悉的语法特性在js不一定支持）。
如何创建一个正则表达式
- 在js中，可以使用
RegExp对象的构造函数来创建RegExp对象：
const pattern = new RegExp("ab?c$");
这行代码会创建一个RegExp对象，它匹配一个包含a,后面紧邻bc或者c，并且以c结尾的字符串模式,如abc,ac,bac。
- 不过，更多的是使用一个
正则表达式字面量，其由包含在斜杠之间的模式组成：
const pattern = /ab?c$/;
上面的代码会也创建一个相同匹配模式新的RegExp对象。
正则表达式的模式规则由一个字符序列组成，包括所有的字母和数字，简单的字符匹配按照字面量中的字符直接匹配即可，如/abc/就可以匹配abc,1abcd。但是日常工作中这种匹配模式的还是少之又少，这个时候，我们就需要一些包含其他语义的字符来帮忙了。
正则表达式中字符
1.元字符
| 字符 | 匹配 |
|---|---|
| \ | 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '' 匹配 "" 而 "(" 则匹配 "("。 |
| 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。 | |
| $ | 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。 |
| * | 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。 |
| + | 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。 |
| ? | 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 |
| {n} | n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 |
| {n,} | n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 |
| {n,m} | m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 |
| ? | 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。 |
| (?:pattern) | 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 ( |
| (?=pattern) | 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95 |
| (?!pattern) | 负向预查，在任何不匹配的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95 |
| x | y |
| [xyz] | 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。 |
| [^xyz] | 利用 ^取反，负值字符集合。匹配未包含的任意字符。例如，'[^abc]' 可以匹配 "plain" 中的'p'。 |
| [a-z] | 字符范围类。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。类内部可以连写，如[a-zA-Z] |
| [^a-z] | 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。 |
| \b | 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。 |
| \B | 匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。 |
| \cx | 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。 |
| \d | 数字字符。等价于 [0-9]。 |
| \D | 非数字字符。等价于 [^0-9]。 |
| \f | 换页符。等价于 \x0c 和 \cL。 |
| \n | 换行符。等价于 \x0a 和 \cJ。 |
| \r | 回车符。等价于 \x0d 和 \cM。 |
| . | 单个字符，除了换行和行结束符。例如，/.n/ 将会匹配 "nay, an apple is on the tree" 中的 'an' 和 'on'，但是不会匹配 'nay' |
| \w | ASCII单词字符，等价[a-zA-Z0-9] 。 例如，/\w/ 匹配 "apple," 中的 'a'，"$5.28,"中的 '5' 和 "3D." 中的 '3' |
| \W | 非ASCII单词字符，等价[^a-zA-Z0-9] 。例如，/\W/ 或者 /[^A-Za-z0-9_]/ 匹配 "50%." 中的 '%' |
| \s | 空白字符,。等价于 [ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff] 。例如，/\s\w*/ 匹配"foo bar."中的' bar' |
| \S | 任何非空白字符。等价于 [^ \f\n\r\t\v] |
| \t | 匹配一个制表符。等价于 \x09 和 \cI。 |
| \v | 匹配一个垂直制表符。等价于 \x0b 和 \cK。 |
| \xn | 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。 |
| \num | 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。 |
| \nm | 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有 nm 个获取的子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。 |
| \nml | 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。 |
| \un | 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。 |
2.修饰符
| 字符 | 使用 |
|---|---|
| i | ignore - 不区分大小写。 将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别。 |
| g | global - 全局匹配。 查找所有的匹配项。 |
| m | multi line - 多行匹配。 使边界字符 ^ 和 $ 匹配每一行的开头和结尾，记住是多行，而不是整个字符串的开头和结尾。 |
| s | 特殊字符圆点 . 中包含换行符 \n 。 默认情况下的圆点 . 是匹配除换行符 \n 之外的任何字符，加上 s 修饰符之后, . 中包含换行符 \n。 |
3.运算符优先级
正则表达式从左到右进行计算，并遵循优先级顺序
| 运算符 | 描述 | |||
|---|---|---|---|---|
| \ | 转义符 | |||
| (), (?:), (?=), [] | 圆括号和方括号 | |||
| *, +, ?, {n}, {n,}, {n,m} | 限定符 | |||
| ^, $, \任何元字符、任何字符 | 定位点和序列（即：位置和顺序） | |||
| 替换，"或"操作。 字符具有高于替换运算符的优先级，使得"m | food"匹配"m"或"food"。若要匹配"mood"或"food"，请使用括号创建子表达式，从而产生"(m | f)ood"。 |
4.分组
捕获性分组：()
捕获性分组工作模式()会把每个分组里匹配的值保存起来。
const str = 'welcome brother'; // 首先创建好字符串
const pattern = /([a-z]+)\s([a-z]+)/; // 正则匹配
// exec捕获匹配字符串以及分组(子串)里的
const arr = pattern.exec(str);
console.log(arr); //['welcome brother','welcome','brother']
console.log(`${arr[2]} ${arr[1]}`) // brother welcome
// 或者$1...9
pattern.test(str); //必须运行正则匹配一次，可以是test()、exec()、以及String的正则方式
console.log(RegExp.$1) //'welcome' 第一个分组([a-z]+)的值
console.log(RegExp.$2) //'brother' 第二个分组([a-z]+)的值
console.log(`${RegExp.$2} ${RegExp.$1}`) //brother welcome
// String replace
console.log(str.replace(pattern,"$2 $1")) //brother welcome
非捕获性分组：(?:)
非捕获性分组工作模式下分组(?:)会作为匹配校验，并出现在匹配结果字符里面，但不作为子匹配返回。
const reg = /(?:\d{4})-(\d{2})-(\d{2})/
const date = '2022-12-24'
reg.test(date)
RegExp.$1 // 12
RegExp.$2 // 24
前瞻(?=)和(?!)
前瞻分为正向前瞻和反(负)向前瞻
- 正向前瞻：(?=表达式)表示后面要有什么
- 反向前瞻：(?!=表达式)表示后面不能有什么
前瞻分组会作为匹配校验，但不出现在匹配结果字符里面，而且不作为子匹配返回。
// 正向前瞻，匹配.txt后缀文件名
const str = 'goods.txt,app.zip,info.txt';
const partern1 = /\w+(?=.txt)/g;
console.log(str.match(partern)); // ['goods', 'info']
// 反向前瞻
const partern2 = /\w+(?=.(?!txt))/g;
console.log(str.match(partern)); //['app']
后顾(?<=)和(?<!) —ES9(2018)
后顾分为正向后顾和反(负)向后顾，部分浏览器不支持。（下面有使用到哦，留意一下）
- 正向后顾：(?<=表达式) 表示前面要有什么
- 反向后顾：(?<!表达式) 表示前面不能有什么
正则的相关方法
具体方法API参见 MDN
| 方法 | 描述 |
|---|---|
| exec | 一个在字符串中执行查找匹配的 RegExp 方法，它返回一个数组（未匹配到则返回 null）。 |
| test | 一个在字符串中测试是否匹配的 RegExp 方法，它返回 true 或 false。 |
| match | 一个在字符串中执行查找匹配的 String 方法，它返回一个数组，在未匹配到时会返回 null。 |
| matchAll | 一个在字符串中执行查找所有匹配的 String 方法，它返回一个迭代器（iterator）。 |
| search | 一个在字符串中测试匹配的 String 方法，它返回匹配到的位置索引，或者在失败时返回 -1。 |
| replace | 一个在字符串中执行查找匹配的 String 方法，并且使用替换字符串替换掉匹配到的子字符串。 |
| split | 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。 |
二、一些业务实例
正则无非就是匹配两个东西，一个是字符，一个是位置
上面的元字符和分组里面已经列举了咱们常用的所有位置符
- ^匹配开头
'good_boy.txt'.replace(/^/, '111') // '111good_boy.txt - /, '111') // 'good_boy.txt111`
- 匹配单词边界，
'good_boy.txt'.replace(/\b/g, '111') // 111good_boy111.111txt111
一些字符簇和常用匹配
[a-z] // 匹配所有的小写字母
[A-Z] // 匹配所有的大写字母
[a-zA-Z] // 匹配所有的字母
[0-9] // 匹配所有的数字
[0-9.-] // 匹配所有的数字，句号和减号
[ \f\r\t\n] // 匹配所有的白字符
^[a-z][0-9]$ //匹配一个由一个小写字母和一位数字组成的字符串，比如 "z2"、"t6" 或 "g7"
[^a-z] //除了小写字母以外的所有字符
[^\/^] //除了()(/)(^)之外的所有字符
[^"'] //除了双引号(")和单引号(')之外的所有字符
^[a-zA-Z0-9_]{1,}$ // 所有包含一个以上的字母、数字或下划线的字符串
^[1-9][0-9]{0,}$ // 所有的正整数
^-{0,1}[0-9]{1,}$ // 所有的整数
^[-]?[0-9]+.?[0-9]+$ // 所有的浮点数，以一个可选的负号 ([-]?) 开头 (^)、跟着1个或更多的数字([0-9]+)、和一个小数点(.)再跟上1个或多个数字([0-9]+)，并且后面没有其他任何东西($)
可优化为
^[a-zA-Z0-9_]+$ // 所有包含一个以上的字母、数字或下划线的字符串
^[1-9][0-9]*$ // 所有的正整数
^-?[0-9]+$ // 所有的整数
^[-]?[0-9]+(.[0-9]+)?$ // 所有的浮点数
加上分组我们就可以处理很多日常场景了
验证密码
密码长度是8-18位，由数字、小写字符和大写字母组成，至少包括2种字符
// 密码长度是8-18位,由数字、小写字符和大写字母组成
const reg1 = /^[a-zA-Z\d]{8,18}$/
// 匹配的是一个位置，这个位置需要满足`任意数量的符号，紧跟着是个数字`, 如goods1 good1s
const reg2 = /(?=.*\d)/
// 将各种条件组合到一起
const reg3 = /((?=.*\d)((?=.*[a-z])|(?=.*[A-Z])))|(?=.*[a-z])(?=.*[A-Z])^[a-zA-Z\d]{8,18}$/
手机号3-4-4分割
// 拿出前三个数字
console.log('13228045678'.replace(/(?<=\d{3})\d+/, '-')) // 132-
console.log('13228045678'.replace(/(?<=\d{3})\d+/, ($0) => '-' + $0)) // 132-28045678
// 继续拿3位数 ，- ， 4位数
console.log('13228045678'
.replace(/(?<=\d{3})\d+/, ($0) => '-' + $0)
.replace(/(?<=[\d-]{8})\d{1,4}/, ($0) => '-' + $0) //132-2804-5678
日期匹配
const reg1 = /\d{4}/(0\d|1[0-2])/(0[1-9]|[12]\d|3[01])/
console.log(reg1.test("2022/12/24")) // true
const reg2 = /\d{4}(/|-)(0\d|1[0-2])(/|-)(0[1-9]|[12]\d|3[01])/
console.log(reg2.test("2022-12-24")) // true
// 还可以是 /^\d{4}(-)(1[0-2]|0?\d)\1([0-2]\d|\d|30|31)$/
手机号
/^(?:(?:+|00)86)?1[3-9]\d{9}$/ 或者 /^(?:(?:+|00)86)?1\d{10}$/
身份证号
// 一代身份证号(15位数字)
const reg1 = /^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$/
// 二代身份证号(18位数字),最后一位可能为数字或字符X
const reg2 = /^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$/
// 身份证号, 支持1/2代(15位/18位数字)
const reg3 = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
数字类
// 是否小数
const reg1 = /^\d+.\d+$/
// 纯数字
const reg2 = /^\d{1,}$/
// 银行卡号
const reg3 = /^[1-9]\d{9,29}$/
常规版本号 X.Y.Z
/^\d+(?:.\d+){2}$/
网址
/^(((ht|f)tps?)://)?[\w-]+(.[\w-]+)+([\w-.,@?^=%&:/~+#]*[\w-@?^=%&/~+#])?$/
最后，给大家推荐一个超7k start的vscode插件，any-rule，常规正则拿过来调整一下，能省很多脑细胞，尤其是写nodejs的小伙伴。
联系我们
如果你对这些WEB前沿技术也有兴趣，欢迎你对我们的文章一键三连，以及关注我们的开源项目——OpenTiny。欢迎微信搜索我们的小助手：opentiny-official，拉你进群，了解OpenTiny最新动态。
官网：opentiny.design/
GitHub：github.com/opentiny
