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=’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(`^

—> 匹配开始标签 的话会匹配到

5. startTagClose

const startTagClose = /^\s*(\/?)>/

—> 匹配结束标签 先是任意数量的空白字符，然后是 />

6. endTag

const endTag = new RegExp(`^]*>`)

—> 匹配结束标签 注意的一点是 这里也能通过，但是这样的数据在loader哪里已经报错了

7. doctype

const doctype = /^^>]+>/i

—> 匹配 声明标签

总结

补了不少正则的知识点，至少基本的正则能写了，能看一些不是特别复杂的正则

本文由乐趣区整理发布，转载请注明出处，谢谢。