我们知道，正则表达式是一个处理字符串中很实用的技巧。然而，即便是Javascript写的很厉害的程序猿，有时也会忘掉正则表达式的语法，从而使用起来有些棘手。本文将通俗讲解Javascript中正则表达式的使用，希望对各位有所帮助。
后来又写了一篇关于es6对正则表达式的扩展，查看文章请点击这里。
这里感谢下慕课网Samaritan89老师，本文在他视频的基础上进行补充和概括，查看原视频请点击这里。

1 一些基本的概念

正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。简单来说，就是按照某种规则去匹配符合条件的字符串。
平时开发过程中，你也许会见到形如这样的正则表达式^([a-zA-Z0-9])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$，(@﹏@)~（写这行正则的人怎么不去死），那么有没有一种更好的图形化展示的界面能够帮我们分析正则表达式呢，这里推荐一个网址regexper。我们只需要在红框部分输入正则表达式，点击display，下面就会以图形化的方式帮我们分析这个正则。

2 RegExp对象

Javascript通过内置对象RegExp支持正则表达式，有两种方法实例化RegExp对象。

• 字面量
• 构造函数

下面我们通过一个具体例子来演示如何实例化RegExp对象。这里匹配字符串中小写的is变为大写的is。我们先看字面量方法。

var reg = /\bis\b/g;//\b表示单词边界，表示这里匹配的is是一个完整的单词，而不是this中的is，\g表示全文搜索匹配
"He is a boy. This is a dog. Where is she?".replace(reg, "IS");//控制台输出"He IS a boy. This IS a dog. Where IS she?"

接着看下使用构造函数的方式。

var reg = new RegExp("\\bis\\b", "g");//\\b表示转义\b
"He is a boy. This is a dog. Where is she?".replace(reg, "IS");//控制台输出"He IS a boy. This IS a dog. Where IS she?"

这里用到了g这个修饰符，除此以外还有修饰符i。i表示忽略大小写进行匹配，默认大小写敏感。下面看这个例子。

"He is a boy. Is he?".replace(/\bis\b/gi, "0");//控制台输出"He 0 a boy. 0 he?"

可以看到不光小写的is，大写的Is也被替换成了"0"。还有一个修饰符m，m表示进行多行搜索匹配。下面看这个例子。

"He is a boy,\n but she is a girl.".replace(/\bis\b/gm, "0");//控制台输出"He 0 a boy,换行一下
 but she 0 a girl."

这里我们在总结一下修饰符的含义。

3 元字符

正则表达式由两种基本字符类型组成：

• 原义文本字符，如"abc", "hello"
• 元字符，如\b

元字符是在正则表达式中有特殊含义的非字母字符，其中包括* + ? $ ^ . | \ ( ) { } [ ]。

4 字符类

我们可以使用元字符[ ]来构建一个简单的类。所谓类是指符合某些特性的对象，一个泛指，而不是特指某个字符。表达式[abc]把字符a或b或c归为一类，表达式可以匹配这类的字符。

"a1b2c3d4".replace(/[abc]/g, "X");//控制台输出"X1X2X3d4"

我们可以使用^创建反向类，反向类的意思是不属于某类的内容。表达式[^abc]表示不是字符a或b或c的内容。

"a1b2c3d4".replace(/[^abc]/g, "X");//控制台输出"aXbXcXXX"

5 范围类

我们可以使用[a-z]来连接两个字符表示从a到z的任意字符，这是个闭区间，包含a，z本身。

"a1b2c3d4z9".replace(/[a-z]/g, "Q");//控制台输出"Q1Q2Q3Q4Q9"

在[ ]组成的类内部是可以连写的[a-zA-Z]。

"a1b2c3d4z9ASDFG".replace(/[a-zA-Z]/g, "Q");//控制台输出"Q1Q2Q3Q4Q9QQQQQ"

6 预定义类及边界

正则表达式提供预定义类来匹配常见的字符串。

下面看个例子，匹配一个ab+数字+任意字符的字符串。
如果是之前的思路，大概要这么写ab[0-9][^\r\n]。现在呢，ab\d.这么写就可以了。

下面看个例子，分别将以@+任意字符开头的和以任意字符+@结尾的字符串替换成Q。

"@123@abc@".replace(/^@./g, "Q");//控制台输出"Q23@abc@"
"@123@abc@".replace(/.@$/g, "Q");//控制台输出"@123@abQ"

7 量词

我们希望匹配一个连续出现20次数字的字符串，原来我们可能会这样写\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d，这样会非常麻烦。量词因此出现了。

注意：{n,m}，逗号后面没有空格！！！
\d?的图形化展示：

8 正则贪婪模式与非贪婪模式

有这样一个字符串"12345678"，对其进行这样的正则匹配\d{3,6}，究竟会匹配多少个呢？是3个，4个，5个，还是6个呢？

"12345678".replace(/\d{3,6}/g, "X");//控制台输出"X78"

可以看到，正则表达式会尽可能多的去匹配，这就是正则的贪婪模式。
如果我们只想让它匹配3个，怎么做呢？这就是正则的非贪婪模式，做法很简单，在量词后加上?即可。

"12345678".match(/\d{3,6}?/g, "X");//控制台输出"XX78"

9 分组

我们要匹配字符串Byron连续出现3次的场景，之前我们可能会这样写ByronByronByron，这样写灰常麻烦。有人说，我学了量词，我知道也可以这样写Byron{3}，但是这样写真的对吗？用图形化界面展示下：

"a1b2c3d4".replace(/([a-z]\d){3}/g, "X");//控制台输出"Xd4"

我们如果想表示或关系，就要用到|。下面看个例子，我们想把Byronsper或者ByrCasper的字符串替换成X。

"ByronsperByrCasper".replace(/Byr(on|Ca)sper/g, "X");//控制台输出"XX"

在处理时间日期的时候，经常需要我们把2017-12-25替换成12/25/2017，这时候应该怎么处理呢？这里引入反向引用，通过$1-$n来捕获第1-n个分组。

"2017-12-25".replace(/(\d{4})-(\d{2})-(\d{2})/g, "$2/$3/$1");控制台输出"12/25/2017"

如果不希望捕获某些分组，只需要在分组内加上?:就可以了。如(?:Byron).(ok)，其图形化界面如下：

10 前瞻

前瞻就是在正则表达式匹配到规则的时候，向前检查是否符合断言，后顾方向相反。Javascript不支持后顾。

我们相匹配一个单词字符且后面是数字的场景，\w(?=\d)。

"a2*34v8".replace(/\w(?=\d)/g, "X");//控制台输出"X2*X4X8"

11 字符串对象方法

search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。方法返回第一个匹配结果的index，查找不到返回-1。search()方法不执行全局匹配，并且总是从字符串的开始进行检索。

"a1b2c3d1".search("1");//控制台输出1
"a1b2c3d1".search(1);//控制台输出1
"a1b2c3d1".search(/1/g);//控制台输出1

match()方法将检索字符串，以找到一个或多个与正则表达式相匹配的文本。正则表达式是否具有标志g对结果影响很大。
没有标志g，那么match()方法就只能在字符串中执行一次匹配，如果没有找到任何匹配的文本，将返回null，否则它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。
有标志g，那么match()方法将执行全局检索，找到字符串中的所有匹配子字符串。
split()方法可以将字符串分割为字符数组。

"a1b2c3d4e".split(/\d/g);控制台输出["a", "b", "c", "d", "e"]

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
替换的内容可以使一个函数function，function会在每次匹配替换的时候调用，有4个参数

• 匹配字符串
• 正则表达式分组内容，没有分组则没有该参数
• 匹配项在字符串中的index
• 原字符串

"a1b2c3d4e5".replace(/\d/g, function(match, index, origin){
    console.log(index);//控制台打印1 3 5 7 9
    return parseInt(match) + 1;//控制台打印"a2b3c4d5e6"
});
"a1b2c3d4e5".replace(/(\d)(\w)(\d)/g, function(match, group1, group2, group3, index, origin){
    console.log(match);//控制台打印1b2 3d4
    return group1 + group3;//控制台打印"a12c34e5"
});

12 几道最近遇到的题（补充）

看一道leetcode上的题，原题链接请点击这里。
500. Keyboard Row
Given a List of words, return the words that can be typed using letters of alphabet on only one row's of American keyboard like the image below.

Input: ["Hello", "Alaska", "Dad", "Peace"]
Output: ["Alaska", "Dad"]

Note:
1.You may use one character in the keyboard more than once.
2.You may assume the input string will only contain letters of alphabet.
翻译过来基本意思就是，给你一个字符串数组，你判断下每个数组元素出现的字母是不是全都是键盘某一行的，如果是就返回这个数组元素。这道题解法有很多，这里着重解释下用Javascript正则表达式解答本题。下面附上源码。

/**
 * 2017.5.3 9:07
 * @param {string[]} words
 * @return {string[]}
 */
var findWords = function(words) {
    var len = words.length,i,str = new Array();
    for(i=0;i<len;i++){
        if(/^[qwertyuiop]*$/i.test(words[i]) || /^[asdfghjkl]*$/i.test(words[i]) || /^[zxcvbnm]*$/i.test(words[i])){//test() 方法用于检测一个字符串是否匹配某个模式.
            str.push(words[i]);
        }
    }
    return str;
};

这里的/^[asdfghjkl]*$/i相当于是以asdfghjkl中的任一字母开头，重复任意次，再以任一字母结尾。

Input: "USA"
Output: True

** Example 2: **

Input: "FlaG"
Output: False

** Note: **
The input will be a non-empty word consisting of uppercase and lowercase latin letters.
翻译过来的意思就是判断一个字符串是否符合书写规范，这里给出三条规则：1.全大写；2.全小写；3.第一个字母大写剩下的小写。如果满足以上三条规范则返回true，否则返回false。这里不再对此正则表达式进行详细解释，请参考上面教程。下面附上源码。

/**
 * 2017.5.4 11:26
 * @param {string} word
 * @return {boolean}
 */
var detectCapitalUse = function(word) {
    return (/^[A-Z][a-z]*$/.test(word) || /^[A-Z]*$/.test(word) || /^[a-z]*$/.test(word));
};

13 总结

以上是听过慕课网Javascript正则表达式视频课后的一些笔记，希望对各位有所帮助。写的不对的地方还请各位大神提出意见，我会加以改正。码字不易，请尊重作者版权，转载注明出处。
By BeLLESS 2017.4.8 17:57