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

更新日期: 2019-04-07阅读: 2.6k标签: 正则

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


总结

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

来自:https://segmentfault.com/a/1190000018765250


链接: https://www.fly63.com/article/detial/2727

javascript较全常用的表达正则验证,js中采用test()方法

正则表达式是一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。本文整理了JS较全且实用正则表达式。

js使用正则过滤emoji表情符号

手机端常常会遇到用户输入框,输入emoji,如果是数据库是UTF8,会遇到报错,原因是:UTF-8编码有可能是两个、三个、四个字节。Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去。

一次记住js的6个正则方法

来记忆一些常用特殊字符,这个是正则本身的范畴了,是不是总觉得记不住?其实我也记不住,每次都是去搜索和online验证来完成一些任务。我也困恼过,其实最后还是因为自己写的少吧,唯手熟尔。。。

密码强度的正则表达式(JavaScript)总结

本文给出了两个密码强度的正则表达式方案,一个简单,一个更复杂和安全。并分别给出了两个方案的解析和测试程序。一般大家可以根据自己的项目的实际需要,自行定义自己的密码正则约定。

JavaScript判断字符串包含中文字符的方法总结

JS中判断一个字符串是否包含汉字,下面就介绍2中常用的实现方法:用正则表达式判断、用 Unicode 字符范围判断。

js常用正则表达式验证大全(整理详细且实用)

正则表达式对象用来规范一个规范的表达式,本文讲的是JS正则表达式大全(整理详细且实用),包括校验数字、字符、一些特殊的需求等等

javascript 正则表达式之分组与前瞻匹配详解

本文主要讲解javascript 的正则表达式中的分组匹配与前瞻匹配的,需要对正则的有基本认识。分组匹配:捕获性分组匹配、非捕获性分组匹配。前瞻匹配:正向前瞻匹配: (?=表达式) 后面一定要匹配有什么、反向前瞻匹配: (?!表达式) 后面一定不能要有什么

利用正则表达式去除所有html标签,只保留文字

后台将富文本编辑器中的内容返回到前端时如果带上了标签,这时就可以利用这种方法只保留文字。利用正则表达式去除所有html标签,只保留文字

正则表达式后行断言 • 探索 ES2018 和 ES2019

先后行断言(Lookaround Assertion)是正则表达式中的一个构造,明确了当前位置的前后字符序列,但没有其他副作用。当前 JavaScript 唯一支持的 Lookaround Assertion 是 先行断言,其匹配当前位置接下来的字符序列

循环下的正则匹配?说说正则中的lastIndex

正则有一个属性叫lastIndex,它表示正则下一次匹配时的起始位置。一般情况下我们是使用不到它的,但在正则中包含全局标志g时,正则的test和exec方法就会使用到它

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!