正则表达式完全指南，总结全面通俗易懂，前端专用！

如果你想学到更多实用前端知识。

可以关注我的公众号：【前端驿站Lite】，一个不止分享前端的地方 ᕦ( •̀∀•́)ᕤ

阅读收获

阅读完本篇文章，你将会有以下收获：

1. 正则限定符、元字符、范围类、字符类、懒惰匹配、修饰符、断言等基础知识
2. js常用正则方法，如：test、exec、match、replace、search、split等

限定符

• ?表示出现1次或0次

'a2232kk1123aaa33224'.match(/a?\d{4}/g)  // [ 'a2232', '1123', 'a3322' ]

• + 表示出现1次或多次，即至少有1次

'a2232kk1123aaa33224'.match(/a?\d{4}/g)  // [ 'a2232', 'aaa3322' ]

• * 表示出现0次或多次，即可以没有，也可以有多个

'a2232kk1123aaa33224'.match(/a*\d{4}/g)  // [ 'a2232', '1123', 'aaa3322' ]

• {n} 表示出现n次
• {n,} 表示出现n次或多次
• {n,m} 表示出现n到m次

'9999a2232kk1123ccccc33224ddddd12234'.match(/[akcd]{2}\d{4}/g) // [ 'kk1123', 'cc3322', 'dd1223' ]
'9999a2232kk1123ccccc33224ddddd12234'.match(/[akcd]{1,}\d{4}/g) // [ 'a2232', 'kk1123', 'ccccc3322', 'ddddd1223' ]
'9999a2232kk1123ccccc33224ddddd12234'.match(/[akcd]{0,2}\d{4}/g) // [ '9999', 'a2232', 'kk1123', 'cc3322', 'dd1223' ]

元字符

• . 表示除换行符以外的任意字符

'aaaa5aa6b'.match(/a.a/g) // [ 'aaa', 'a5a' ]

• ^ 匹配字符串的开始
• $ 匹配字符串的结束

const reg = /^[0-9][a-z]*@$/
const res = reg.test('9a@') 

console.log(res) // true

• | 表示或的关系，即满足任意一个条件即可

'a2232kk1123c33224dd12234'.match(/(a|k|c)\d{4}/g) //[ 'a2232', 'k1123', 'c3322' ]

• [] 字符集，匹配方括号内的任意字符

'a2232kk1123c33224dd12234'.match(/[akc]\d{4}/g) // [ 'a2232', 'k1123', 'c3322' ]

• [^ ] 非字符集，匹配除了方括号里的任意字符

 'a1b2k699'.match(/[^abc]\d/g) // [ 'k6', '99' ]

• () 字符集，括号内是一个整体，要完全相等才能匹配

'abcabc8899abc8876ab5151'.match(/(abc){1,}\d{4}/g)  // [ 'abcabc8899', 'abc8876' ]

• \ 转义字符，将特殊字符（[ ] ( ) { } . * + ? ^ $ \ |）转义成普通字符

'aa$886$an$65$11'.match(/\$[0-9]*\$/g) // [ '$886$', '$65$' ]

范围类

• [a-z] 匹配a-z之间的任意一个字符
• [A-Z] 匹配大写A-Z之间的任意一个字符
• [0-9] 匹配0-9之间的任意一个字符
• [a-zA-Z0-9] 匹配a-z、A-Z、0-9之间的任意一个字符

'abcABC123'.match(/[a-z]/g) // [ 'a', 'b', 'c' ]
'abcABC123'.match(/[A-Z]/g) // [ 'A', 'B', 'C' ]
'abcABC123'.match(/[0-9]/g) // [ '1', '2', '3' ]
'abcABC123'.match(/[a-zA-Z0-9]/g) // [ 'a', 'b', 'c', 'A', 'B', 'C', '1', '2', '3' ]

字符类

• \w 匹配字母、数字、下划线，相当于[a-zA-Z0-9_]
• \W 匹配非字母、数字、下划线，相当于[^a-zA-Z0-9_]
• \d 匹配数字，相当于[0-9]
• \D 匹配非数字，相当于[^0-9]
• \s 匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
• \S 匹配非空格，相当于[^\t\r\n\v\f]

"112_dd+a2-c4c".match(/\w\d?\D/g)   // [ '12_', 'dd', 'a2-', 'c4c' ]
"11A".match(/^\w\d?\D/g)   // [ '11A' ]

懒惰匹配

? 如果紧跟在任何量词 *、+、? 或 {} 的后面，将会使量词变为非贪婪（懒惰匹配，匹配尽量少的字符)

'<div>box盒子</div>'.match(/<.+>/g)  // [ '<div>box盒子</div>' ]

// 懒惰匹配
'<div>box盒子</div>'.match(/<.+?>/g)  // [ '<div>', '</div>' ]

修饰符

• i 忽略大小写
• g 全局匹配

const reg = /[a-z]\d/gi
const res = 'A1B1BBC'.match(reg)
console.log(res) // [ 'A1', 'B1' ]

断言

正向先行断言

(?=pattern) 匹配 pattern 之前的位置，即：要想满足匹配，后面得跟着 pattern

负向先行断言

(?!pattern) 匹配 pattern 之前的位置，即：要想满足匹配，后面不能跟着 pattern

正向后发断言

(?<=pattern) 匹配 pattern 之后的位置，即：要想满足匹配，前面得跟着 pattern

负向后发断言

(?<!pattern) 匹配 pattern 之后的位置，即：要想满足匹配，前面不能跟着 pattern

规律

• 所谓”正”，即字符中需要出现 pattern
• 所谓“负”，即字符中不能出现 pattern
• 所谓“先”，即匹配在 pattern 前的位置
• 所谓“后”，即匹配在 pattern 后的位置

js 常用正则方法

创建正则

// 字面量
const reg = /ab+c/

// 调用 RegExp 对象的构建函数生成
const reg = new RegExp("ab+c", "g")

test

test 返回布尔值，表示是否匹配

const reg = /^[a-z].*\d$/

const res = reg.test('wassssd3')  // true

exec

数组属性可以为字母、汉字

const arr = []
arr[0] = 'a'
arr['name'] = 'arr'

console.log(arr[0]) // a
console.log(arr[1]) // undefined
console.log(arr['name']) // arr

exec 匹配成功返回一个数组(例如：[ 'a1+', index: 0, input: 'a1+w3*w3cwwwa1+', groups: undefined ]):

• 第一个元素为匹配到的字符串
• 该数组还包含index属性，表示匹配项在原始字符串中的起始位置
• 还包含input属性，表示原始字符串

const reg = /[a-z]\d?\D/g
const res = reg.exec('a1+w3*w3cwwwa1+')  // true
console.log(res) // [ 'a1+', index: 0, input: 'a1+w3*w3cwwwa1+', groups: undefined ]

全局匹配下，exec每次执行都会从上一次匹配项的后面继续搜索，返回匹配结果，存在则返回数组，不存在则返回null

const regex = /[a-z]\d?\D/g;
const str = "a1+w3*w3cwwwa1+";
let match;

while ((match = regex.exec(str)) !== null) {
  console.log(`匹配到的文本：${match[0]}`);
  console.log(`匹配项在字符串中的起始位置：${match.index}`);
}

// 匹配到的文本：a1+
// 匹配项在字符串中的起始位置：0
// 匹配到的文本：w3*
// 匹配项在字符串中的起始位置：3
// 匹配到的文本：w3c
// 匹配项在字符串中的起始位置：6
// 匹配到的文本：ww
// 匹配项在字符串中的起始位置：9
// 匹配到的文本：wa
// 匹配项在字符串中的起始位置：11

match

match 返回匹配结果，数组或null

const reg = /[a-z]\d?\D/g
const res = 'a1+w3*w3cwwwa1+'.match(reg) 
console.log(res) // [ 'a1+', 'w3*', 'w3c', 'ww', 'wa' ]

replace

replace 返回替换后的字符串

const reg = /[a-z]\d\w/g
const res = 'a1bbbct6y'.replace(reg, '***')  
console.log(res) // ***bbc***

search

search 返回匹配到的第一个字符的索引，没有匹配到返回-1

// 注意：\w 包含数字
const reg = /\w\d{2}/g
const res = '**a333a3a3'.search(reg) // 匹配到的是a33，返回索引为2
console.log(res) // 2

split

split 返回匹配到的字符串组成的数组

const reg = /[a-z]\d/g
const res = '*aa19ba81'.split(reg)
console.log(res)  // [ '*a', '9b', '1' ]

常用正则

如果看起来很轻松，那正则就算过关了！

// 手机号码的校验
const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
// 身份证的校验
const idCardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
// URL的校验
const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
// 邮箱的校验
const emailReg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
// 日期 YYYY-MM-DD 校验
const dateReg = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/