最近在学习逐行剖析 Vue.js 源码的时候，发现Vuejs在模板编译时大量使用正则表达式。因此，将正则表达式的知识再温习一下。

基本概念

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。

基本语法

特殊字符

正则表达式中的特殊字符:

\

依照下列规则匹配：

在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。例如，前面没有 “" 的 “b” 通常匹配小写字母 “b”，即字符会被作为字面理解，无论它出现在哪里。但如果前面加了 “"，它将不再匹配任何字符，而是表示一个字符边界。

在特殊字符之前的反斜杠表示下一个字符不是特殊字符，应该按照字面理解。详情请参阅下文中的 “转义（Escaping）” 部分。

如果你想将字符串传递给 RegExp 构造函数，不要忘记在字符串字面量中反斜杠是转义字符。所以为了在模式中添加一个反斜杠，你需要在字符串字面量中转义它。/[a-z]\s/i 和 new RegExp(“[a-z]\s”, “i”) 创建了相同的正则表达式：一个用于搜索后面紧跟着空白字符（\s 可看后文）并且在 a-z 范围内的任意字符的表达式。为了通过字符串字面量给 RegExp 构造函数创建包含反斜杠的表达式，你需要在字符串级别和表达式级别都对它进行转义。例如 /[a-z]:\/i 和 new RegExp(“[a-z]:\\“,”i”) 会创建相同的表达式，即匹配类似 “C:" 字符串。

^

匹配输入的开始。如果多行标志被设置为 true，那么也匹配换行符后紧跟的位置。

例如，/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’。

当 ‘^’ 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。反向字符集合一节有详细介绍和示例。

$

匹配输入的结束。如果多行标示被设置为 true，那么也匹配换行符前的位置。

例如，/t$/ 并不会匹配 “eater” 中的 ‘t’，但是会匹配 “eat” 中的 ‘t’。

*

匹配前一个表达式 0 次或多次。等价于 {0,}。

例如，/bo*/ 会匹配 “A ghost boooooed” 中的 ‘booooo’ 和 “A bird warbled” 中的 ‘b’，但是在 “A goat grunted” 中不会匹配任何内容。

+

匹配前面一个表达式 1 次或者多次。等价于 {1,}。

例如，/a+/ 会匹配 “candy” 中的 ‘a’ 和 “caaaaaaandy” 中所有的 ‘a’，但是在 “cndy” 中不会匹配任何内容。

?

匹配前面一个表达式 0 次或者 1 次。等价于 {0,1}。

例如，/e?le?/ 匹配 “angel” 中的 ‘el’、”angle” 中的 ‘le’ 以及 “oslo’ 中的 ‘l’。

如果紧跟在任何量词 *、 +、? 或 {} 的后面，将会使量词变为非贪婪（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反。例如，对 “123abc” 使用 /\d+/ 将会匹配 “123”，而使用 /\d+?/ 则只会匹配到 “1”。

还用于先行断言中，如本表的 x(?=y) 和 x(?!y) 条目所述。

.

小数点）默认匹配除换行符之外的任何单个字符。

例如，/.n/ 将会匹配 “nay, an apple is on the tree” 中的 ‘an’ 和 ‘on’，但是不会匹配 ‘nay’。

如果 s (“dotAll”) 标志位被设为 true，它也会匹配换行符。

\n

在正则表达式中，它返回最后的第n个子捕获匹配的子字符串(捕获的数目以左括号计数)。

比如 /apple(,)\sorange\1/ 匹配”apple, orange, cherry, peach.”中的’apple, orange,’ 。

\s

匹配一个空白字符，包括空格、制表符、换页符和换行符。等价于[ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。

例如, /\s\w*/ 匹配”foo bar.”中的’ bar’。

\w

匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。

例如, /\w/ 匹配 “apple,” 中的 ‘a’，”$5.28,”中的 ‘5’ 和 “3D.” 中的 ‘3’。

\W

匹配一个非单字字符。等价于 [^A-Za-z0-9_]。

例如, /\W/ 或者 /[^A-Za-z0-9_]/ 匹配 “50%.” 中的 ‘%’。

(x)

像下面的例子展示的那样，它会匹配 ‘x’ 并且记住匹配项。其中括号被称为捕获括号。

模式 /(foo) (bar) \1 \2/ 中的 ‘(foo)’ 和 ‘(bar)’ 匹配并记住字符串 “foo bar foo bar” 中前两个单词。模式中的 \1 和 \2 表示第一个和第二个被捕获括号匹配的子字符串，即 foo 和 bar，匹配了原字符串中的后两个单词。注意 \1、\2、…、\n 是用在正则表达式的匹配环节，详情可以参阅后文的 \n 条目。而在正则表达式的替换环节，则要使用像 $1、$2、…、$n 这样的语法，例如，’bar foo’.replace(/(…) (…)/, ‘$2 $1’)。$& 表示整个用于匹配的原字符串。

标志

标志	描述
g	全局搜索。
i	不区分大小写搜索。
m	多行搜索。
s	允许 . 匹配换行符。
u	使用unicode码的模式进行匹配。
y	执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标

使用方法

正则表达式可以被用于 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。使用正则表达式的方法如下：

方法

方法	描述
exec	一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。
test	一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。
match	一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。
matchAll	一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。
search	一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace	一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split	一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 String 方法。

对象	属性或索引	描述	在例子中对应的值
myArray		匹配到的字符串和所有被记住的子字符串。	[“dbbd”, “bb”]
myArray	index	在输入的字符串中匹配到的以0开始的索引值。	1
myArray	input	初始字符串。	“cdbbdbsbz”
myArray	[0]	匹配到的所有字符串（并不是匹配后记住的字符串）。注：原文”The last matched characters.”，应该是原版错误。匹配到的最终字符。	“dbbd”
myRe	lastIndex	下一个匹配的索引值。（这个属性只有在使用g参数时可用在通过参数进行高级搜索一节有详细的描述.)	5
myRe	source	模式文本。在正则表达式创建时更新，不执行。	“d(b+)d”

示例

var re = /\w+\s/g;
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

// ["fee ", "fi ", "fo "]

参考链接

逐行剖析 Vue.js 源码,by nlrx.
正则表达式,by mozilla.