目录
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()进一步处理。