从vue模板解析学习正则表达式

2024年3月7日 225次阅读 来源: fuqihan

前言

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

总结

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

    原文作者：fuqihan
    原文地址: https://segmentfault.com/a/1190000018765250
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞