浅析正则表达式匹配方法 match()

　　在前端开发中，正则表达式是一大利器。所以我们这次就来讨论下match()方法。

　　match本身是JavaScript语言中字符串对象的一个方法，该方法的签名是

　　match([string] | [RegExp])

　　它的参数既可以是一个字符串，也可以是一个正则表达式。该方法绝大多数都是要使用正则表达式的，所以参数为string的情况不在本文讨论范围之内。其实参数即使是一个简单的string，其返回值也跟使用正则表达式的结果无异，而且使用正则表达式的变化比较多，用法复杂，所以我们只讨论正则的用法。

　　一、返回值问题。

　　我们必须明确的是，这个方法跟其他语言是不同的。JavaScript中的match()方法的返回值是数组或者是null。如果原字符串中匹配到了正则表达式指代的子串，则返回一个数组，否则返回null。

　　二、不使用全局匹配　　

var str = "The rain in Spain falls mainly in the plain";
var ret = str.match(/ain/i);
console.log(ret);

　　输出的结果是：

　　再强调一次，这个例子的结果是没有使用全局匹配的正则表达式的匹配结果。说白了，就是正则表达式的末尾没跟g。由于不适用全局匹配，所以match()方法只找到源字符串中首次匹配的子串后，就立刻得到返回结果，不再比较之后剩余的部分是否还有能匹配上的内容。

　　这里要注明的是正则表达式 /ain/i中的那个末尾的 i，该字符的作用跟做全局匹配时，在正则表达式末尾添加的g是相似的用法，这里的i表示在匹配时忽略英文字母的大小写。

　　我们可以看到，match()的结果是一个数组，该数组一共有4项。各项代表的意思如下：

　　第0项：匹配到字符串

　　第1项：index表示首次匹配上的子串的起始下标。

　　第2项：input，表示源字符串

　　第3项：length，表示匹配到的结果个数，由于这里不使用全局匹配，只找到首次匹配项就结束了，所以匹配结果只有1个，length也就是1.

　　三、使用全局匹配　　

var str = "The rain in Spain falls mainly in the plain";
var ret = str.match(/ain/ig);
console.log(ret);

　　这次我们在正则表达式的末尾添加了 i和g，其形如： /ain/ig 。该正则表达式的意图是，在字符串str中匹配连续的”ain“子串，并且忽略大小写，并且要找出所有的匹配之处。

　　这次结果如下：

　　可以看到，这次的返回值仍然是个数组，只不过这个数组的内容跟上边不使用全局匹配时大不相同的。由于原字符串中出现了4个单词中包含”ain“子串的情况，所以该数组中出现了4个同为”ain“的项。length属性同样为匹配到的结果个数，这里显然是4个。

　　重点是，此时返回的数组中，没有index，input，groups这3项。

　　四、使用分组

　　使用分组时的情况比较麻烦，还要看有没有使用全局匹配，也就是有没有在正则表达式的末尾添加g

　　4.1 使用分组，且不使用g　　

var str = "The rain in Spain falls mainly in the plain";
var ret = str.match(/a(in)/i);
console.log(ret);

　　其返回值是：

　由于该正则表达式为： /a (in) / i ，该表达式中使用了小括号（），在此处的作用为分组。所以match()的结果是带有分组特征的。返回的数组包含多个元素，第一个元素是找到的匹配，之后的元素依次为该匹配中的第一、第二、第三 ......个分组，这里只有1个分组，所以也就只匹配到1个分组结果，也就是”in"。数组中其它项不在解释了，参考上边的。

　　同理，如果代码如下：

var str = "The rain in Spain falls mainly in the plain";
var ret = str.match(/a(i)(n)/i);
console.log(ret);

　　那么返回值是：

　　由于正则中出现2个（），也就是出现2个分组，所以这个结果里，数组的第0项是整个正则表达式匹配到结果，第1项和第2项分别是分组匹配到的。

　　需要注意的是，这种结果是前提是：1.使用分组，2.不做全局匹配。

　　4.2 使用分组，同时使用全局匹配g

var str = "The rain in Spain falls mainly in the plain";
var ret = str.match(/a(i)(n)/ig);
console.log(ret);

　　这次的代码，跟上次的代码区别只有一点，就是正则表达式末尾多了个g，表示全局匹配。

　　结果也是大不相同的。

　　结果说明了一切，没有index，input。

　　你说这是什么意思？为什么会是这样？

　　你只需要记住这个匹配的工作模式！！！苍天啊，大地啊！　　　

浅析正则表达式匹配方法 match()

相关推荐