彻底搞懂javascript中的match, exec的区别

在工作中经常发现一些同学把这两个方法搞混，以致把自己弄的很郁闷。所以我和大家一起来探讨一下这两个方法的奥妙之处吧。

我们分以下几点来讲解：

相同点：

1.两个方法都是查找符合条件的匹配项，并以数组形式返回。
2.当没有找到匹配项时，都返回null。
3.当正则表达式包含子表达式且不包含全局标志g时，二者返回相同的数组。

示例：

var str = 'cat10,bat20,kat30';
var patten = /\w(at)\d+/;
var arr = str.match(patten);
arr[0] <=> ['cat10']
arr[1] <=> ['at']

var arr = patten.exec(str);
arr[0] <=> ['cat10']
arr[1] <=> ['at']

区别：

1.match是字符串的方法，exec是RegExp对象的方法

示例：

var str = 'cat,bat,kat';
var patten = /at/;
str.match(patten);  //at
patten.exec(str);   //at

2.当正则表达式带有全局标志g时，二者表现不一致。

match会返回所有符合条件的匹配项，并以数组形式返回。数组第一项存放第一个匹配项，数组第二项存放第二个匹配项...依次类推。

exec则永远返回第一个匹配项。但是当连续调用exec时，则每次的返回值都是下一个匹配项。

示例1：

var str = 'cat,bat,kat';
var patten = /at/g;
str.match(patten);  //['at', 'at', 'at']
patten.exec(str);  //['at']

示例2：

var str = 'cat,bat,kat';
var patten = /\w+/g;
str.match(patten);  //['cat', 'bat', 'kat']

//第一次调用
patten.exec(str);  //['cat']
//第二次调用
patten.exec(str);  //['bat']
//第三次调用
patten.exec(str);  //['kat']

3.当正则表达式包含子表达式时且包含全局标志g时，二者表现不一致。

match会返回所有符合条件的匹配项，并以数组形式返回。这时，match不会再返回子表达式的匹配项了。数组第一项存放第一个匹配项，数组第二项存放第二个匹配项...依次类推。
exec会返回子表达式的匹配项。换句话说就是，数组第一项存放整个匹配项，数组第二项存放第一个子表达式匹配项，数组第三项存放第二个子表达式匹配项...依次类推。

示例：

var str = 'cat10,bat20,kat30';
var patten = /\w(at)\d+/g;
var arr = str.match(patten);  //['cat10', 'bat20', 'kat30']
var arr = patten.exec(str);
arr[0] <=> ['cat10']
arr[1] <=> ['at']