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