一文彻底揭秘正则表达式的基础语法与应用

正则表达式，文本处理界的瑞士军刀。看起来是一堆奇怪的符号，但掌握了它，处理字符串的效率真的能提升一个量级。这篇文章，我们从基础语法讲起，配合实际场景，带你彻底搞懂它。

一、正则表达式属性（修饰符）

修饰符的作用很简单：让正则引擎在搜索时，能够切换不同的“视角”。

1. 【i】不区分大小写

有时我们只关心内容本身，不关心字母是大写还是小写。这时就可以加上 i 修饰符。比如 /abc/i，就能匹配到 “ABC”、“abc” 以及各种大小写混排的情况。

var reg1 = /abc/
var reg2 = /abc/i
var str1 = 'ABC'
console.log(reg1.test(str1)) // false
console.log(reg2.test(str1)) // true

2. 【g】全局匹配

如果不加 g，正则匹配到第一个符合条件的结果就会停下。加上 g 之后，它会像扫描仪一样，把整个字符串里所有满足条件的结果都找出来。

var reg3 = /aa/
var reg4 = /aa/g
var str2 = "aabaaaab"
console.log(str2.match(reg3)) // ["aa"]
console.log(str2.match(reg4)) // ["aa","aa","aa"]

3. 【m】执行多行匹配

默认情况下，^ 匹配字符串的开头，$ 匹配结尾。但如果字符串内有多行文本，加上 m 修饰符后，^ 和 $ 就会分别匹配每一行的开头和结尾。

var reg5 = /^ab/g
var reg6 = /^ab/gm
var str3 = "abcd\nabc"
console.log(str3.match(reg5)) // ["ab"]
console.log(str3.match(reg6)) // ["ab","ab"]

二、正则表达式模式

模式用来定义我们要搜索的“字符范围”。

1. 【[]】

方括号内的内容，代表“在这个范围内取一个字符”。比如 [0-9] 代表匹配一位数字；[a-z] 代表匹配一位小写字母。如果在方括号内加上 ^，就表示“取反”，即匹配不在这个范围内的字符。

// 匹配连续三个数字
var reg7 = /[0-9][0-9][0-9]/g
var reg8 = /[^0-9][^0-9][^0-9]/g
var str4 = "121231ko23puu123"
console.log(str4.match(reg7)) // ["121","231","123"]
console.log(str4.match(reg8)) // ["puu"]

2. 【()】

圆括号配合 | 可以表达“或”的逻辑。它会匹配括号内由 | 分隔的任意一个模式。

var reg9 = /(abc|bcd)/g
var str5 = "abcabbcd"
console.log(str5.match(reg9)) // ['abc', 'bcd']

三、正则表达式的元字符

元字符是拥有特殊含义的字符，本质上就是功能更强大的表达式。

1. 【\w】和【\W】

\w 匹配“单词字符”，包括大小写字母、数字和下划线，等价于 [A-z0-9]。大写 \W 则正好相反，匹配非单词字符。

var reg10 = /\w\W/g
var str5 = "a;0,op"
console.log(str5.match(reg10)) // ['a;', '0,']

2. 【\d】和【\D】

正如字面意思所示，\d 代表数字，等价于 [0-9]。它的反义是大写的 \D，匹配非数字。

var reg11 = /\d\D\D/g
var str6 = "1jj2lo990ol"
console.log(str6.match(reg11)) // ['1jj', '2lo', '0ol']

3. 【\s】和【\S】

\s 匹配空白字符，包括空格、制表符（\t）、换行符（\n）等。它的反义是大写的 \S。

var reg12 = /\s/g
var str7 = "\n123\f123 1"
console.log(str7.match(reg12)) // ['\n', '\f', ' ']

4. 【\b】和【\B】

\b 匹配单词边界，可以理解为单词与空格之间的那个“位置”。大写的 \B 则匹配非单词边界。

var reg12 = /\b/g
var str8 = "1231231"
var str9 = "1231231 123kk"
var str10 = "1231231 123kk "
console.log(str8.match(reg12)) // ['', '']
console.log(str9.match(reg12)) // ['', '', '', '']
console.log(str10.match(reg12)) // ['', '', '', '']

var reg13 = /\bc/g
var str11 = "cth cujcc"
console.log(str11.match(reg13)) // ['c', 'c']

5. 【\t】、【\n】、【\r】、【\v】、【\f】

这些元字符匹配的是不可见的特殊字符：\t 是制表符，\n 是换行符，\r 是回车符，\v 是垂直换行符，\f 是换页符。

var reg14 = /\acts/g
var str12 = "\actsdf"
var str13 = "ac\tsdf"
console.log(str12.match(reg14)) // ['\acts']
console.log(str13.match(reg14)) // null

6. 【\u

四位 Unicode 编码，常用于匹配中文字符。比如 [\u3000-\ua000] 代表一个中文编码区间。

var reg15 = /\u4f60\u597d/ // 匹配“你好”的Unicode编码
var str14 = "你好"
console.log(str14.match(reg15)) // ['你好']

7. 【.】

小圆点 . 可以匹配除换行符和行结束符之外的任意单个字符。

var reg16 = /./g
var str15 = "你 很\nt帅"
console.log(str15.match(reg16)) // ['你', ' ', '很', 't', '帅']

四、正则表达式的量词（代表数量的词）

量词决定了前面的“模式”要重复出现多少次。

1. 【n+】

匹配包含至少一个 n 的字符串。可以出现 1 次到无数次。

var reg17 = /\w+/g
var str16 = "abc"
var str17 = "abcndb"
console.log(str16.match(reg17)) // ['abc']
console.log(str17.match(reg17)) // ['abc', 'ndb']

2. 【n*】

匹配包含零个或多个 n 的字符串。可以出现 0 次到无数次。

var reg18 = /\w*/g
var reg19 = /\d*/g
var str18 = "abc"
var str19 = "abcdb"
console.log(str18.match(reg18)) // ['abc', '']
console.log(str19.match(reg18)) // ['abcdb', '']
console.log(str19.match(reg19)) // ['', '', '', '', '', '']

3. 【n?】

匹配包含零个或一个 n 的字符串。

var reg20 = /\w?/g
var str20 = "aaaaaaaaaa"
console.log(str20.match(reg20)) // ['a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', '']

4. 【n{X}】

匹配包含 X 个 n 的序列。

var reg21 = /\w{3}/g
var str21 = "aaaaaaaaaa"
console.log(str21.match(reg21)) // ['aaa', 'aaa', 'aaa']

5. 【n{X,Y}】

匹配包含 X 至 Y 个 n 的序列。

var reg22 = /\w{3,5}/g
var str22 = "aaaaaaaaaaa"
console.log(str22.match(reg22)) // ['aaaaa', 'aaaaa']

6. 【n{X,}】

匹配包含至少 X 个 n 的序列。

var reg23 = /\w{3,}/g
var str23 = "aaaaaaaaaaa"
console.log(str23.match(reg23)) // ['aaaaaaaaaaa']

7. 【n$】

n$ 匹配以 n 结尾的字符串。相应的，^n 匹配以 n 开头的字符串。

var reg24 = /[0-9]b$/g
var str24 = "0b9o34hb9b"
console.log(str24.match(reg24)) // ['9b']

var reg24 = /^[0-9]/g
var str24 = "00934h"
console.log(str24.match(reg24)) // ['0']

8. 【?=n】

这个叫“正向预查”，匹配其后紧接特定字符串 n 的字符串。

var reg25 = /a(?=b)/g
var str25 = "abaabaaaa"
console.log(str25.match(reg25)) // ['a', 'a']

9. 【?!n】

跟上面相反，匹配其后没有紧接特定字符串 n 的字符串。也叫“正向断言”。

var reg26 = /a(?!b)/g
var str26 = "abaabaaaa"
console.log(str26.match(reg26)) // ['a', 'a', 'a', 'a', 'a']

五、正则表达式的对象属性

正则表达式本身也是一个对象，它有一些内置属性帮助我们了解它的状态。

1. 【constructor】

返回创建 RegExp 对象原型的函数。

var reg27 = /[0-9]/
console.log(reg27.constructor) // RegExp()

2. 【global】

检查是否设置了 “g” 修饰符。

var reg28 = /[0-9]/g
console.log(reg28.global) // true

3. 【ignoreCase】

检查是否设置了 “i” 修饰符。

var reg29 = /[0-9]/i
console.log(reg29.ignoreCase) // true

4. 【lastIndex】

规定开始下一个匹配的索引。

var reg30 = /[0-9]/i
console.log(reg30.lastIndex) // 0

5. 【multiline】

检查是否设置了 “m” 修饰符。

var reg31 = /[0-9]/m
console.log(reg31.multiline) // true

6. 【source】

返回 RegExp 模式的文本。

var reg32 = /[0-9]/i
console.log(reg32.source) // [0-9]

六、正则表达式的对象方法

1. 【exec()】

这个方法可以深入挖掘匹配信息。它会返回找到的值，并确定其位置。

• 如果全局匹配，它会记住位置，每次调用都返回下一个匹配结果，直到返回 null 后，再从头开始。
• 通过修改 lastIndex 属性，可以手动控制搜索起点。
• 如果不加 g 修饰符，lastIndex 不会移动，每次返回的都是第一个结果。

var reg33 = /ab/g
var str27 = 'abababa'
console.log(reg33.exec(str27)) // [0:'ab',index:0]
console.log(reg33.exec(str27)) // [0:'ab',index:2]
console.log(reg33.exec(str27)) // [0:'ab',index:4]
console.log(reg33.exec(str27)) // null
console.log(reg33.exec(str27)) // [0:'ab',index:0]

reg33.lastIndex = 4
console.log(reg33.exec(str27)) // [0:'ab',index:4]
reg33.lastIndex = 3
console.log(reg33.exec(str27)) // [0:'ab',index:4]

2. 【test()】

这是最常用的方法之一，用来测试字符串中是否存在匹配项，返回 true 或 false。

var reg34 = /ab/
var str28 = 'abababa'
console.log(reg34.test(str28)) // true

toString() 方法则用来返回正则表达式的字符串形式。

var reg35 = /ab/gi
console.log(reg35.toString()) // /ab/gi

七、正则表达式的拓展

【()】的“子表达式”特性

圆括号除了用来分组，还有一个隐藏功能：它会“记住”括号内匹配到的内容，之后可以用 \1、\2 这类反向引用将其调出来。

var reg36 = /(\w)\1\1\1/g
var str29 = 'aaaabbbb'
console.log(str29.match(reg36)) // ['aaaa','bbbb']

var reg37 = /(\w)\1(\w)\2/g
var str30 = 'aabbccdd'
console.log(str30.match(reg37)) // ['aabb', 'ccdd']
console.log(reg37.exec(str30)) // [0:'aabb',1:'a',2:'b',...]

var reg38 = /(\w)\1(\w)\2/
var str31 = 'aabbccdd'
console.log(str31.match(reg38)) // [0:'aabb',1:'a',2:'b',...]

八、支持正则表达式的 String 对象的方法

1. 【search】

检索与正则表达式相匹配的值。如果找到，返回匹配到的位置；否则返回 -1。

var reg39 = /(\w)\1(\w)\2/g
var str32 = 'aabboojj'
var str33 = 'caabboojj'
var str34 = 'caaboj'
console.log(str32.search(reg39)) // 0
console.log(str33.search(reg39)) // 1
console.log(str34.search(reg39)) // -1

2. 【split】

这个方法很实用，可以用正则来分割字符串，返回分割后的数组。

var reg40 = /\d/g // 使用数字分割
var str35 = 'aa8bb7cc9dd'
console.log(str35.split(reg40)) // ['aa', 'bb', 'cc', 'dd']

var reg41 = /(\d)/g // 使用数字分割，并保留分割符
var str36 = 'aa8bb8cc9dd'
console.log(str36.split(reg41)) // ['aa', '8', 'bb', '8', 'cc', '9', 'dd']

3. 【match】

找到一个或多个正则表达式的匹配。它和 exec 有些类似，但使用起来更直接。

var reg42 = /^[0-9]/g
var str37 = "00934h"
console.log(str37.match(reg42)) // ['0']

4. 【replace】

这是字符串处理中的王牌方法，可以用正则匹配到的内容来进行替换。配合子表达式和 $1、$2，可以实现非常灵活的重构。

var reg43 = /(\w)\1(\w)\2/g  // 将aabb形式的内容换成bbaa
var str38 = "aabb"
console.log(str38.replace(reg43, "$2$2$1$1")) // bbaa
console.log(str38.replace(reg43, function ($, $1, $2) {
    return $2 + $2 + $1 + $1
})) // bbaa

九、补充

1. 贪婪模式

正则表达式默认是“贪婪”的——它会在可能的情况下匹配尽可能多的内容。如果想让它变得“懒惰”（能少匹配就少匹配），可以在量词后面加一个 ?。

var reg44 = /a+/g
var reg45 = /a+?/g
var str39 = 'aaaa'
console.log(str39.match(reg44)) // ['aaaa']
console.log(str39.match(reg45)) // ['a', 'a', 'a', 'a']

// ① ??
var reg46 = /a??/g
var str40 = 'aaaa'
console.log(str40.match(reg46)) // ['', '', '', '', '']

// ② *?
var reg47 = /a*?/g
var str41 = 'aaaa'
console.log(str41.match(reg47)) // ['', '', '', '', '']

2. 获取一切的集合

想用一个正则表达式表示“所有字符”？可以使用 [\s\S] 或 [\d\D] 这样的互补集合组合。