正则表达式之初入江湖

为什么要学正则表达式

很多人对正则表达式的认知只是在进行表单验证的时候在网上搜一段正则表达式进行copy，实际工作上好像很难遇到大段的正则表达式

我第一次看到大量的正则使用是在jQuery源码中，当时看的头疼只好草草的看下大概思路不了了之，但是到今天我依然不认为这种做法是错误的，jQuery早期为了兼容性代码很多地方太脏，不如在网上搜搜源码架构。拿jQuery举例子只想说明你总会在一些阴暗的角落遇到正则表达式，为了到时候不至于一头雾水，我们最好简单的了解一下正则表达式的使用。

看完本文你不会称为正则专家，实际你也不需要精通正则，能看懂别人写的正则和能写一些简单的正则即可

之前在网上搜过一些文章，感觉写的都不太好把我的耐心都磨没了所以我决定写一篇符合“人”学习直觉的文章

创建正则表达式

在JavaScript中与大多数其他对象类型一样，有两种方法可以创建正则表达式比如我们要匹配一个"test"字符串

• 通过正则表达式字面量

var pattern = /test/;

• 通过构造RegExp实例

var pattern = new RegExp("test");

前者直接在//中写匹配规则就Ok了，后者需要调用RegExt构造方法，并把匹配规则用""包起来，很明显第一种更加清晰，反正我每次都记不住"RegExp"，每次用都要现查，所以我们接下来用第一种就好了（RegExp有它的好处但是目前不需要知道）

现在你一定想知道/test/表达的是什么意思？

这种一个接一个的字符，隐式的表达了"followed by"这样一个操作也就是一个挨着一个

1. 't'后面跟着'e'
2. 'e'后面跟着's'
3. 's'后面跟着't'

正则表达式的威力仅此而已吗？如果只是这样就太让人失望了，因为完全可以使用indexOf进行判断

接下来我们额外学习三个英文字母，在正则中他们有各自的含义

• i 让正则表达式不分大小写 /test/i 表示不仅可以匹配'test'还可以匹配'TeSt'
• g 全局匹配 默认情况正则只匹配第一次出现的结果比如'testkdgyitest' 找到第一个'test'就算完成工作了，而g可以找到所有符合条件的匹配值
• m 允许匹配多个行比如匹配textarea中的值

请记住这些字母跟在//后面 如/test/i

接下来让我们做个小练习，有如下字符串，将字符串中的test(不区分大小学)替换成“啊哈正则” 提示：js替换字符串常用replace方法并且replace第一个参数接收正则表达式

var str =  "sjufhsufhTesT";//将test（不论大小写）替换成“啊哈正则”

答案：

var str =  "sjufhsufhTesT";
var pattern = /test/i;
var newStr = str.replace(pattern, "啊哈正则");

前面说了默认情况正则只匹配第一次出现的结果，我们来测试一下

var str =  "testsjufhsufhTesT";
var pattern = /test/i;
var newStr = str.replace(pattern, "啊哈正则");// 结果如下"啊哈正则sjufhsufhTesT"

我们加上g试试

var str =  "testsjufhsufhTesT";
var pattern = /test/ig;
var newStr = str.replace(pattern, "啊哈正则");// 结果如下"啊哈正则sjufhsufh啊哈正则"

匹配一类字符

有时候我们想更灵活一些，不想只匹配某个特定的字符串，而是想匹配集合中的某一个字符，比如我们只想匹配“a” “b” “c”中任何一个字符 我们可以这么写[abc]

[]中可以指定一个集合比如[abc]，那么如果想指定一个从a到z的集合，难道我们把26个英文字母一个一个写一遍吗？当然不需要！我们可以在[]中指定范围[a-z]

没懂？看下面的例子就好了

var str1 = "ak恩ebc";
var pattern1 = /[abc]/;
var newStr1 = str1.replace(pattern1,"雅儿");
console.log(newStr1);//雅儿k恩ebc
我们看到我们想要abc之中的任何一个字符，即使中间隔着其他字符也没关系，但是默认情况是如果找到了a就停止往下继续匹配b和c了，如果没匹配到a，那么将匹配b，以此类推

如果想全部匹配请加上在//后加上"g"

现在有个新需求，匹配除abc之外的字符，我们怎么办呢？可以在集合中插入一个"^" ¹

"^" 表示除...之外

var str2 = "ak恩ebc";
var pattern2 = /[^abc]/g;
var newStr2 = str2.replace(pattern2,"雅儿")
console.log(newStr2);//a雅儿雅儿雅儿bc

各位看客看到这里想必也累了，余下的内容以后再说。先把这次的内容复习一下

• 正则表达式的两种创建方式
• i g m 三个字母代表的特殊含义 i表示不区分大小写 g表示全局匹配 m表示允许匹配多个行 （别忘了写在//后 如/test/i）
• 可以用[]匹配集合中的某个字符串
• 可以^实现反选，表示除...之外

最后推荐一个正则可视化工具，可以在上面练习正则，通过可视化的方式更轻松的理解

https://regex101.com/

---

1. abc ↩