源码学习之Mustache(双大括号)正则解析

789 阅读2分钟

目录

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