目录
var defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;
这句就是Vue源码中,用于匹配双大括号的正则语句。
1. 正则语法
先来复习一下这句正则表达式里出现的一些语法:
\{
表示匹配左花括号\}
表示匹配右花括号()
标记一个子表达式的开始和结束位置?:
表示匹配内容,但是不捕获内容.
号匹配除换行符 \n 之外的任何单字符|
表示或,即两者之间满足一个即可匹配\r
匹配回车符\n
匹配换行符+
匹配前面的子表达式一次或多次/g
表示全局匹配
2. defaultTagRE解析
再来分析defaultTagRE
:
- 最外层的
\{\{
表示匹配两个左大括号,\}\}
表示匹配两个右大括号; - 中间括号里的
(?:.|\r?\n)
表示匹配任意字符,或,回车换行(注意:\r
回车后面一定要有换行\n
);至少匹配到一次或多次;使用?:
则不会再单独匹配一次子表达式.|\r?\n
,可提高性能。
3. exec()检索匹配
源码中在parseText()
方法中使用exec()
函数进行检索匹配:
exec()
方法返回一个结果数组或null(未匹配成功时),结果数组的第 0 个元素是与正则表达式相匹配的文本,第 1 个元素是与 正则表达式 的第 1 个子表达式相匹配的文本(如果有的话),第 2 个元素是与 正则表达式 的第 2 个子表达式相匹配的文本(如果有的话),以此类推。
如:
var defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g;
const txt = `{{a\n}}{{b}}{{c}}{{\n}}{{ }}`
while ((match = defaultTagRE.exec(txt))) {
console.log(match[1])
}
运行结果:
"a↵"
"b"
"c"
"↵"
" "
这里取的是第 1 个子表达式((?:.|\r?\n)+?)
匹配到的文本。
可以看到最后两个结果,换行符和空格也通过了正则匹配,因此在源码中还须用trim()
进一步处理。