前言

最近在看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> 声明标签

总结

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

本文固定链接: http://www.js-code.com/vue-js/vue-js_27171.html