字符串的模式匹配

承上启下

对于上篇中@Samaritains给的意见，底下查了一下，发现match()这个方法用在那里真的是太合适了。

var sum = document.getElementById('sum');
var click = document.getElementById('click');
click.addEventListener('click',function add(){
        var pattern = /\d+/g;
        var c = 0;
        var d = sum.value.match(pattern);
        for(var i = parseInt(d[0]); i <= parseInt(d[1]); i ++){
              c +=i;
        }
    alert(c);
},false);

首先match返回的是一个数组，而且对于文本框输入的格式没有了太多限制，只要输入的2个数字不是紧挨着的（当然中间也不可以用数字的），那么就可以得到想要的结果。Samaritains的一句话犹如海港的灯塔，指明了方向。既然提到了match，顺便杂谈下字符串的匹配。

字符串的模式匹配

1.match与字符串的羁绊

match() 方法将检索字符串 stringObject，以找到一个或多个与 RegExp 匹配的文本，并返回一个数组。match()只接受一个参数，要么是正则表达式，要么是一个RegExp对象。

match() 方法很大程度上依赖RegExp是否具有g标志。没有g标志的话，这个方法只能在字符串中执行一次匹配。

var str = 'hello world23o31';
var pat = /.o/;
var pat1 = /\d+/;
console.log(str.match(pat));//['lo']
console.log(str.match(pat1));//['23']

 得到匹配结果的同时，也在数组中存放了2个属性信息，包含index和input。

console.log(str.match(pat).index);//1
console.log(str.match(pat1).index);//11

再看下有g标志的匹配

var str = 'hello world23o32';
var pat = /.o/g;
var pat1 = /\d+/g;
console.log(str.match(pat));//["lo", "wo", "3o"]
console.log(str.match(pat1));//["23", "31"]

 很明显，match() 方法将执行全局检索，找到 字符串中的所有匹配子字符串。如果没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组与前者大不相同，它没有 index 属性或 input 属性，也就是说使用index和input会提示undefined。这一点是与exec()最大的区别了，exec()无论是不是在全局检索的情况下都会把index和input，当然还有lastIndex存放到数组中，这个就不细说了。所以如果想在全局检索中获取匹配项的信息，可以使用exec()。

2.search()

search()方法很简单，就是返回与正则表达式或者字符串查找内容匹配的第一个子字符串的位置。如果没有匹配项，则会返回-1。

var str = 'abcDEF';
console.log(str.search('c')); //2
console.log(str.search('d')); //-1
console.log(str.search(/d/i));//3

其参数只有一个，可以是字符串，也可以是RegExp对象。个人认为search()类似match()的子功能，只是没有匹配项时返回的结果不同。

3.split()

从字面就可以看出这是个分割的方法，基于制定的分隔符将一个字符串分割成多个字符串，并将结果放在数组中。其中有2个参数，第一个为必选，可以使字符串或者正则表达式，第二个参数为可选，为一个整数，标识限制返回的片段，也就是数组的长度。

var str = "1234";
var str1 = "a、bd、c";
var arr = str.split("");
var arr1 = str1.split("、");
var arr2 = str1.split("、",2);
console.log(arr);//['1','2','3','4']
console.log(arr1);//['a','bd','c']
console.log(arr2);//['a','bd']

对于str1的分割应该都还好理解，就是简单的把"、"去掉，然后把由“、”隔开的每个字符串依次放到一个数组中，后面的2规定了新数组的长度。而第一个用空字符串进行分割，相当于把每个字符进行分开，得到由每个字符组成的数组。如果我在“”中加一个空格或者其他与1234不同的字符，得到的结果就是['1234']，这是因为在str中没有找到匹配的项，以至于split()会按照没有传参进行分割，split()在没有参数的情况下返回的数组包含一个元素，该元素是原字符串。

通过split()函数可以获取一些想要的东西，比如我前面写的那个叠加，比如我想要通过qq邮箱获取到qq号码，再比如我想获取某个手机号的后四位。就说最后一个例子吧。

<input id="num" type="text"/>
<input id="n" type="text"/>
<input type="button" onclick="num()" value="获取手机号后四位"/>

先列出2个文本框，第一个为输入的手机号，另一个为手机号后四位。

function num(){
    var a = document.getElementById("num").value;
    var b = document.getElementById("n");
    var c = a.split("");
    var d = c[7] + c[8] + c[9] + c[10];
    b.value = d;
}

这样就很容易得到了。

4.灵魂般的replace()

对于replace()，简单一看就是替换。可以传入俩个参数，第一个参数可以是字符串也可以是正则对象，第二个参数可以使字符串也可以是函数。由于它的第二个参数可以传入函数，导致其具有很强的灵活性，应用的范围很广。该方法并不改变调用它的字符串本身，而只是返回替换后的字符串。在这就不多介绍了，因为内容太多，就单独拿出来写了。

结尾

这次写的有些仓促，不太详细。在周日之前会把replace()函数和match()与exec()的区别会详细的罗列出来。