脚本宝典收集整理的这篇文章主要介绍了

从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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过