当前位置: 首页 > Web前端 > vue.js

小胡子(双大括号)正则解析源码学习

时间:2023-03-31 18:09:54 vue.js

目录1.正则语法2.DefaultTagRE解析3.Exec()搜索匹配vardefaultTagRE=/\{\{((?:.|\r?\n)+?)\}\}/g;这句话是Vue源码中用来匹配双括号的正则语句。1.正则文法首先我们来回顾一下这个正则表达式中出现的一些文法:\{表示匹配左花括号\}表示匹配右花括号()表示子表达式的开始和结束?:表示匹配内容,但不捕获内容。该数字匹配除换行符以外的任何单个字符\n|表示或,即满足两者之一,则可以匹配\r匹配回车符\n匹配换行符+匹配前一个子表达式公式一次或多次/g表示全局匹配2.DefaultTagRE分析再分析defaultTagRE:最外层的\{\{表示匹配两个左大括号,\}\}表示匹配两个右大括号;中括号(?:.|\r?\n)表示匹配任意字符,或者,回车和换行符(注意:\r后面必须跟换行符\n);至少匹配一次或多次;使用?:不会将子表达式.|\r?\n单独再次匹配,这样可以提高性能。3、exec()查找匹配源码中,使用parseText()方法中的exec()函数进行查找匹配:exec()方法返回结果数组或null(匹配不成功时),结果数组的第0个元素与匹配正则表达式的文本相同,第一个元素是匹配正则表达式的第一个子表达式(如果有的话)的文本,第二个元素是匹配第二个子表达式的文本正则表达式匹配的文本(如果有的话),等等。如:vardefaultTagRE=/\{\{((?:.|\r?\n)+?)\}\}/g;consttxt=`{{a\n}}{{b}}{{c}}{{\n}}{{}}`while((match=defaultTagRE.exec(txt))){console.log(match[1])}运算结果:"a?""b""c""?"""这里是第一个子表达式((?:.|\r?\n)+?)匹配的文本。可以看到最后两个结果,换行符和空格也通过了正则匹配,所以在源码中必须使用trim()做进一步的处理。