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

Posted 2021-09-13 游走走

<!-- TOC -->

目录

• 1. 正则语法
• 2. defaultTagRE解析
• 3. exec()检索匹配

<!-- /TOC -->

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