古老而强大的正则

发表于 |

最近在vue的tamplate语法中使用了不少的正则，但是由于JS中正则的使较少的情况下，对正则的使用还是处于很陌生的状态。

另外发现很少有文章很详细的介绍了JS中关于对正则的入门级的使用方法的文章使得不少像我一样的小伙伴对正则处于一知半解的状态，于是萌生了专门写一篇关于正则的博客的想法。

下为正文

正则在JS中的创建方式

新建正则的方法有两种,第一种则是使用RegExp构造函数

1
var regex = new RegExp('MriLiuJY');

第二是使用一种是使用字面量，使用以斜杠表示开始和结束

1
var regex = /MriLiuJY/;

两种方式创建的是等价的。不同的是字面量的方式会在JS引擎解析的时候就会新建一个正则表达式，而第一种则是在运行的时候才会新建一个正则表达式。所以第二种的效率会高于第一种。

正则表达式还可以接受第二个参数,表示修饰符

  • g 全局搜索。
  • i 不区分大小写搜索。
  • m 多行搜索。
  • y 执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志。(这是一个测试属性)

实例：

1
var regex = new RegExp('MriLiuJY', i);

其完全等价于

var regex = /mriliujy/;

相信看到这对正则有了一定的了解，但是上面的例子都还不能表示正则的强大，下面来看下正则中最让人心动也是最让人头疼的特殊字符

正则中的特殊字符

字符 含义
\ 匹配将依照下列规则：在非特殊字符之前的反斜杠表示下一个字符是特殊的，不能从字面上解释。例如，没有前面’\’的’b’通常匹配小写’b’，无论它们出现在哪里。如果加了’\’,这个字符变成了一个特殊意义的字符，意思是匹配一个字符边界。反斜杠也可以将其后的特殊字符，转义为字面量。例如，模式 /a/ 代表会匹配 0 个或者多个 a。相反，模式 /a\/ 将 ‘‘ 的特殊性移除，从而可以匹配像 “a“ 这样的字符串。使用 new RegExp(“pattern”) 的时候不要忘记将 \ 进行转义，因为 \ 在字符串里面也是一个转义字符。
^ 匹配输入的开始。如果多行标志被设置为true，那么也匹配换行符后紧跟的位置。例如，/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’。当 ‘^’ 作为第一个字符出现在一个字符集合模式时，它将会有不同的含义。补充字符集合 一节有详细介绍和示例。
$ 匹配输入的结束。如果多行标示被设置为true，那么也匹配换行符前的位置。例如，/t$/ 并不会匹配 “eater” 中的 ‘t’，但是会匹配 “eat” 中的 ‘t’。

以上仅为很小的一部分（从MDN搬运的..）

调用正则表达式

方法 描述
exec 一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回null）。
test 一个在字符串中测试是否匹配的RegExp方法，它返回true或false。
match 一个在字符串中执行查找匹配的String方法，它返回一个数组或者在未匹配到时返回null。
search 一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。
replace 一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。
split 一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的String方法。
hi you can see me