学习Vue中那些正则表达式

想看懂Vue的template解析部分,会发现其中有大量的正则表达式。所以先学习基础知识。
其实正则表达式并不难,关键在于拆分理解,并且经常使用。就可以很好的熟悉正则表达式了。具体语法可参照正则表达式 - JavaScript | MDN 。
正则用法 在JavaScript中正则表达式用法为:
/正则表达式特殊字符/修饰符(可选)

特殊字符 这里列一下正则的特殊字符及其用法,加深理解和映象。
* \ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n,特殊符号 ( 变为字符 \(
* ^ 匹配字符串起始位置。
* $ 匹配字符串结束位置。
* * 匹配前面的子表达式零到多次。
* + 匹配前面的子表达式一到多次。
* ? 匹配前面的子表达式零到一次。
* {n} 匹配前面的子表达式的n个,如 o{2} 能够匹配 food 不能匹配 god
* {n,} 至少匹配n个前面的子表达式,如 o{2,} 能够匹配 fooooood 不能匹配 god
* {n, m} 至少匹配n次,至多匹配m次。
* 非贪婪模式 默认为贪婪模式,如 o+ 将匹配 foooood 的所有 o。而非贪婪模式(在匹配符后面加 ?),如 o+? 则只会匹配一个o
* . 匹配除换行符外任何单个字符。换行符为 \n\r
* (x) 捕获括号,匹配并记住匹配项。
* (?:x) 非捕获括号,匹配并不记住匹配项。如 /(?:foo){1,2}/,这里将 foo 作为一个整体进行匹配1到2次。
* x(?=y) 匹配x仅仅在x后面跟y的时候。?=y 表示字符串末尾是y。
* x(?!y) 匹配x仅仅在x后面不跟着y的时候。?!y 表示字符串末尾不是y。
* x|y 匹配 x 或 y,如 jack|rose 就可以匹配到 jack 和 rose 两个字符串。
* [xyz] 匹配方括号内任意字符。
* [^xyz] 反向字符集,匹配除方括号内字符的任意字符。
* [0-9] 范围匹配,匹配0-9范围内任意字符。
* \w 查找单词字符。单词字符包括:a-z、A-Z、0-9,以及下划线。
* \W 查找非单词字符。
* \d 查找数字字符。
* \D 查找非数字字符。
* \s 查找空白字符。空白字符包括空格、\n、\f、\r、\t、\v。
* \S 查找非空白字符。
* \b 匹配单词边界,通常匹配单词开头和结尾。如 /\bcd/ 匹配 cdkey
* \B 匹配非单词边界。如 /\Bcd/ 匹配 abcd
* \O 查找 NULL 字符。
* \n 换行符。
* \f 换页符。
* \r 回车符。
* \t 制表符。
* \v 垂直制表符。
修饰符
  • i 执行对大小写不敏感的匹配。
  • g 执行全局匹配。
  • m 执行多行匹配。
简单正则实例分析 上面介绍了正则的简单用法,下面收集一些简单的正则进行分析。
/^[0-9]*$/

0-9范围内0到多个数字的组合,且字符开头结尾都是0-9的数字。即表示整数。如 1314、0
/^\d{m,n}$/

匹配m-n位的数字。由于开头结尾都是数字,所以它是一个固定长度的纯数字。
/^\-[1-9][0-9]*$/

匹配-开头,数字结尾,第一个字符为1-9,随后0-n个字符为0-9的字符。即非零负整数。
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

这是匹配邮件的一个正则,我们一点点看。
开头匹配1-n个单词字符;
括号里匹配 [-+.] 字符加上1-n个单词字符,括号内容匹配0-n次;
加上@字符;
加上1-n个单词字符字符
括号里匹配 [-.] 字符加上1-n个单词字符,括号内容匹配0-n次;
加上.字符
加上1-n个单词字符字符
括号里匹配 [-.] 字符加上1-n个单词字符,括号内容匹配0-n次;
结尾;
这里考虑了很多因素邮箱命名因素,一般的邮箱地址像 475966597@qq.com 这种肯定是没问题的。所以,我极端测试来展现它列出的可能性,结果如下(我把所有可能性都符合了一遍):
学习Vue中那些正则表达式
文章图片

/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

再来看个手机号验证。一步步来:
开头匹配手机号前三位是 13[0-9] 或 14[5|7] 或者 15[0|1|2|3|5|6|7|8|9] 或 18[0|1|2|3|5|6|7|8|9];
匹配后八位数字为0-9的字符;
结束。
/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/

这是验证身份证的正则,来看看:
开头为一个1-9的数字;
加上五位0-9的数字;
加上一位1-9的数字;
加上三位0-9的数字;
加上 0/d 或者 1[0-2],即月份 01、02……12;
加上 ([0|1|2]\d) 或者 3[0-1],即日起,01、13、25、31;
加上身份证末四位;
/^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.[x|X][m|M][l|L]$/

这是xml文件命名正则。
开头为 1-n个 [a-zA-Z] 字符 加上 0-1个 - 组成;
括号内的内容可重复1-n次;
加上1-n个 [a-zA-Z0-9] 字符;
加上 ·.·;
加上 x 或 X;
加上 m 或 M;
加上 l 或 L;
结尾;
解析 Vue 源码中的正则
/; (?![^(]*\))/g

由于 ?! 符号,所以是匹配 ; 字符。
我们之前说过,?! 符号表示字符串末尾不是指定字符串。
这个指定字符串 [^(]*\) 解析为 0-n 个不为 ( 的任意字符加上 )
用例子说明。匹配条件为 ; 字符后面不能跟 ; xx)xx 但是可以跟 ; (xx)xx
/:(.+)/

以上正则表示匹配 : 加上 1-n 个 .
var defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g; var regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g;

defaultTagRE 的正则:匹配 {{ 字符,然后匹配非换行符或 \n (即排除了 \r),最后加上 }}
regexEscapeRE 的正则:全局匹配 -.*+?^${}()|[]/\。注意,只有在 ()| 才表示或,如 /(g|f)ood/
/&(?:lt|gt|quot|amp|#10|#9); /g

【学习Vue中那些正则表达式】匹配 < > " &
var onRE = /^@|^v-on:/; // 以@或v-on开头的字符 var dirRE = /^v-|^@|^:/; // 以v-、@、:开头的字符 var forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/; // 匹配如 item in list 或者 item of list var forIteratorRE = /\((\{[^}]*\}|[^,]*),([^,]*)(?:,([^,]*))?\)/; var argRE = /:(.*)$/; // 匹配 : 加上 0-n 个非换行字符结尾的条件 var bindRE = /^:|^v-bind:/; // 匹配 : 或 :v-bind 开头的字符 var modifierRE = /\.[^.]+/g; // 全局匹配 `.` 加上 1-n 个非 `.` 字符。

解析一下这个 forIteratorRE,其实就是看着乱。
先得到一个 ( 字符;
再获取 (\{[^}]*\}|[^,]*) ,这里匹配的是 { 加 0-n 个非 } 字符加 },或者 0-n 个非 , 字符。
加上字符 ,;
得到 ([^,]*) , 这里匹配的是 0-n 个非 , 字符;
得到 (?:,([^,]*))?\),加上字符 , 然后加上 0-n 个非 , 字符,这整个表达式,数量为 0-1;
最后加上 )
所以匹配字符串可以是 (,)({abc},wc,uvw)
/'(?:[^'\\]|\\.)*' |"(?:[^"\\]|\\.)*" |`(?:[^`\\]|\\.)*\$\{ |\}(?:[^`\\]|\\.)*` |`(?:[^`\\]|\\.)*`/g

以上正则看似很长,其实通过 | 或关系进行拆分,敲回车便于查看后发现,其实是由五个表达式组合起来的。
逻辑差不多,看第一个表达式:先添加' ,然后添加0-n个非 '\ 的字符,最后加上 '。如 'abc'
/-(\w)/g

先添加 - 字符,再添加单词字符,进行匹配。
/\B([A-Z])/g

不在单词边界上的 A-Z 的字母字符,如 rAr
/(?:^|[-_])(\w)/g

字符串第一个字符为单词字符,或者以 [-_] 加字符形式出现的匹配。
/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

再长的正则拿到手就需要进行拆分:
^\s* 表示以0-n个空白字符开头;
([^\s"'<>\/=]+) 表示有1-n个非 空白字符、"'<>\/=的字符。
最后一个表达式较长,而且由于表达式最后有 ?,所以这段表达式可以不匹配。先是0-n个空白字符,加上 = 号,加上 0-n 个空白字符。之后有三种情况:情况一:加上 ,加上 0-n 个非空白字符,再加上1-n个 ;情况二:加上 ',加上 0-n 个非空白字符,再加上1-n个 ';情况三:加上1-n个非 空白字符、"'=<>、` 的字符。
最后 正则表达式看到这也算是有了一定了解了。
其实只要懂得正则基本语法、然后耐心去看去理解,会发现正则也不是那么难的。
这里推荐 https://regex101.com/#javascript 这个工具,本博客就是一边用这个工具实践验证一边写的,非常好用!
我先通过猜测理解正则大致意思,然后用这个工具去验证,验证成功,反推回来更好理解正则表达式。
就是这样!
明日预告 既然正则被我们搞定了,那么明天写 Vue 的 template 解析问题就不大啦。敬请期待~

    推荐阅读