一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。
Vue全家桶的系统学习，其中包括Vue源码分析、Vue-Router的使用和原理、Vuex的用法和原理、Vue-ssr、如何进行单元测试 和 一些常见的Vue面试题。
解析标签和内容
我们在之前的文章中进行了 模板参数的解析，获取了到了对应的模板数据*（也就是对应的 DOM元素内容）*。
而我们获取到的模板，其中包括 标签、属性、表达式、文本内容 以及 一些样式属性 等等。
而我们这篇文章，主要就是为了将对应的模板内容进行解析，并进行相应的处理。
正则匹配
在我们之前新建的 /src/compiler/index.js 文件中，添加下列正则表达式。
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`;
const qnameCapture = `((?:${ncname}\\:)?${ncname})`;
const startTagOpen = new RegExp(`^<${qnameCapture}`); // 标签开头的正则 捕获的内容是标签名
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); // 匹配标签结尾的 </div>
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; // 匹配属性的
const startTagClose = /^\s*(\/?)>/; // 匹配标签结束的 >
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g
这里推荐一个正则表达式可视化网站 Regexper
startTagOpen 打印出来的正则表达式是 /^<((?:[a-zA-Z_][\-\.0-9_a-zA-Z]*\:)?[a-zA-Z_][\-\.0-9_a-zA-Z]*)/，其含义就是**可以匹配到所有的标签，包括存在命名空间*（ namespace）* 的标签 等等 **，如下图所示。
endTag 匹配的就是 标签的结尾。
attribute 匹配 属性。
startTagClose 匹配 开始标签的结束（就是 > 或 /> 两种情况）**。
defaultTagRE 匹配的就是 {{ 和 }} 表达式的变量。
（注：Vue3 中没有采用正则判断，只有Vue2 中使用正则来进行判断。）
接下来我们就要对获取的模板，使用正则匹配的方式来进行解析。
本篇文章由 莫小尚 创作，文章中如有任何问题和纰漏，欢迎您的指正与交流。 您也可以关注我的 个人站点、博客园 和 掘金，我会在文章产出后同步上传到这些平台上。 最后感谢您的支持！
