共计 1150 个字符，预计需要花费 3 分钟才能阅读完成。
前言
最近在看 vue 的模板解析成 render 这一块，顺便补一下正则的知识
文件地址 srccompilerparserhtml-parser.js
1. attribute
const attribute = /^\s*([^\s”‘<>\/=]+)(?:\s*(=)\s*(?:”([^”]*)”+|'([^’]*)’+|([^\s”‘=<>`]+)))?/
这段正则很长，他的主要作用是匹配标签里的指令，可以分几个分组来解读
^\s*
^ 从起始位置开始匹配
\s 空白字符 * 匹配前面的子表达式零到多次
—-> 匹配空白字符，匹配指令名前面的空白符
([^\s”‘<>\/=]+)
[^xyz] 反向字符集
+ 匹配前面的子表达式一到多次
—> 匹配指令名
例: aaa= —-> aaa aaa/ —> aaa
(?:\s*(=)\s*(?:”([^”]*)”+|'([^’]*)’+|([^\s”‘=<>`]+)))?
? 匹配前面的子表达式零到一次。
—> 这个表达式最后有个？，意思就是这个可以不匹配，像是一些属性是 boolean 的标签
“([^”]*)”+
—> 匹配双引号，且中间有值 例：name=”aaa”
‘([^’]*)’+
—> 匹配单引号，且中间有值 例：name=’aaa’
([^\s”‘=<>`]+
—> 匹配不跟引号的情况 例：name=aaaa
\s*(=)\s*
—> 去掉 = 左右的空白字符
2. ncname
const ncname = ‘[a-zA-Z_][\\w\\-\\.]*’
\w 查找单词字符。单词字符包括：a-z、A-Z、0-9，以及下划线。
—> 用于识别合法的 xml 标签 匹配第一个字是 [a-zA-Z_]，之后是 \w 的情况
3. qnameCapture
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
—> 匹配 aaa:aaa 的情况
4. startTagOpen
const startTagOpen = new RegExp(`^<${qnameCapture}`)
—> 匹配开始标签 <aaaaa> 的话会匹配到 <aaaaa
5. startTagClose
const startTagClose = /^\s*(\/?)>/
—> 匹配结束标签 先是任意数量的空白字符，然后是 />
6. endTag
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
—> 匹配结束标签 注意的一点是 这里 </aaa 我 > 也能通过，但是这样的数据在 loader 哪里已经报错了
7. doctype
const doctype = /^<!DOCTYPE [^>]+>/i
—> 匹配 <!DOCTYPE> 声明标签
总结
补了不少正则的知识点，至少基本的正则能写了，能看一些不是特别复杂的正则