字符串的模式匹配

承上啓下

對於上篇中@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()的區別會詳細的羅列出來。