手摸手快速入门 正则表达式 (Vue源码中的使用)

vue2源码

在 vue2 源码的 src\compiler\parser\html-parser.js 文件中

里面有大量的正则表达式，如下图

可以看到非常的长，不是我说，就前几行，如果没有相关的 正则表达式 的工具，我可能就被劝退了😭

这里先推荐一个 可视化正则表达式 工具，非常好用！

回归正题，那上面这么多 正则表达式 代表的什么含义呢？

• 它们主要是用来匹配我们的 html 模板* 之后会将匹配到的内容，转化成 AST 语法树可以看到这些是很重要的，

我们接下来分析理解一下里面的相关内容。

1. startTagOpen

它是 html： 开始标签的 左边 部分

而生成这个 正则表达式 的代码有四行

const unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`) 

它的作用，或者说它能够匹配到的内容

• 标签开始符号 <，当然后面会跟着相关的标签内容，下面会分析有哪些标签内容* 但是注意 没有 标签结束符 >### 1.1 ncname

在知道它匹配什么内容了之后，我们看一下 ncname，

可以看到它是一个 字符串，里面有 unicodeRegExp.source

这就引出我们第一个知识点，正则的 RegExp.source

可以看下它的 MDN 介绍，我们知道它这个属性的作用是

• 获取正则表达式里面的内容* 即获取到 两侧的斜杠 /.../ 之间的内容即，我们得到 ncname 这个字符串的值为

const ncname = '[a-zA-Z_][\\-\\.0-9_a-zA-Za-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u203F-\\u2040\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD]*' 

转化为正则后

const newNcanme = new RegExp(ncname)

/[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*/ 

我们将这个正则表达式放到 可视化工具 中，得到下图

可以看到它能够匹配，开头为 a-z 、 A-Z 、_ 中的其中一个，后面则是零次或多次

1.2 qnameCapture

知道 ncname 匹配的内容是什么之后，我们接下来我们看下 qnameCapture

const qnameCapture = `((?:${ncname}\\:)?${ncname})`

'((?:[a-zA-Z_][\\-\\.0-9_a-zA-Za-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C