关于前端:源码学习之Mustache双大括号正则解析

<!– 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() 进一步解决。