vue正则表达式html标签,从vue模板解析学习正则表达式

前言

最近在看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=’a