正则表达式之初入江湖

为何要学正则表达式

不少人对正则表达式的认知只是在进行表单验证的时候在网上搜一段正则表达式进行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 ↩