脚本宝典收集整理的这篇文章主要介绍了从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(`^<${qnameCapture}`)

---> 匹配开始标签   <aaaaa>的话会匹配到  <aaaaa

5. startTagClose

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

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

6. endTag

 const endTag = new RegExp(`^<\/${qnameCapture}[^>]*>`)

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

7. doctype

 const doctype = /^<!DOCTYPE [^>]+>/i

 --->  匹配<!DOCTYPE> 声明标签

总结

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

脚本宝典总结

以上是脚本宝典为你收集整理的从vue模板解析学习正则表达式全部内容，希望文章能够帮你解决从vue模板解析学习正则表达式所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。