js字符串和正則表達式中的match、replace、exec等函數詳解

正則並非常常使用，而正則和字符串之間的函數關係又錯綜複雜，誰是誰的函數，又是怎麼樣的一種結果，每每咱們是看一遍忘一遍，對此我是頭疼不已，感受本身是個笨蛋^_^。

爲了之後再也不查文檔，特此把經常使用的函數和功能，簡明扼要的羅列在此，以備往後查看：

RegExp對象的函數經常使用的有2個

一、test函數

用法：RegExpObject.test(string)

返回：若是字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，不然返回 false。

描述：這個方法沒有什麼特殊之處，對修飾符g沒有什麼特殊處理

示例：

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /a=1/;
3 console.log(reg.test(url));    // 輸出結果爲 true

二、exec函數

用法：RegExpObject.exec(string)

返回：返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

描述：

exec() 方法的功能很是強大，它是一個通用的方法，並且使用起來也比 test() 方法以及支持正則表達式的 String 對象的方法更爲複雜。

若是 exec() 找到了匹配的文本，則返回一個結果數組。不然，返回 null。此數組的第 0 個元素是與正則表達式相匹配的文本，第 1 個元素是與 RegExpObject 的第 1 個子表達式相匹配的文本（若是有的話），第 2 個元素是與 RegExpObject 的第 2 個子表達式相匹配的文本（若是有的話），以此類推。除了數組元素和 length 屬性以外，exec() 方法還返回兩個屬性。index 屬性聲明的是匹配文本的第一個字符的位置。input 屬性則存放的是被檢索的字符串 string。咱們能夠看得出，在調用非全局的 RegExp 對象的 exec() 方法時，返回的數組與調用方法 String.match() 返回的數組是相同的。

可是，當 RegExpObject 是一個全局正則表達式時，exec() 的行爲就稍微複雜一些。它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時，在匹配後，它將把 RegExpObject 的 lastIndex 屬性設置爲匹配文本的最後一個字符的下一個位置。這就是說，您能夠經過反覆調用 exec() 方法來遍歷字符串中的全部匹配文本。當 exec() 再也找不到匹配的文本時，它將返回 null，並把 lastIndex 屬性重置爲 0。

示例：

正則表達式帶修飾符g

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /([^?&=]+)=([^?&=])*/g;
3 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
4 console.log(reg.exec(url)); //["b=2", "b", "2", index: 25, input: "http://www.baidu.com?a=1&b=2&c=3"]
5 console.log(reg.exec(url)); //["c=3", "c", "3", index: 29, input: "http://www.baidu.com?a=1&b=2&c=3"]
6 console.log(reg.exec(url)); //null
7 reg.lastIndex = 0;  //這段代碼很重要哦，注意理解
8 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]

正則表達式不帶修飾符g

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /([^?&=]+)=([^?&=])*/g;
3 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
4 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
5 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
6 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
7 reg.lastIndex = 0; 
8 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]

發現不同的地方了嗎，把函數描述好好讀一遍，就明白了^_^

 

String對象的函數支持正則的有4個，咱們只說其中的2個

一、match函數

用法：stringObject.match(searchvalue | regexp)，這裏咱們只說regexp模式

返回值：存放匹配結果的數組。該數組的內容依賴於 regexp 是否具備全局標誌 g。

描述：

match() 方法將檢索字符串 stringObject，以找到一個或多個與 regexp 匹配的文本。這個方法的行爲在很大程度上有賴於 regexp 是否具備標誌 g。

若是 regexp 沒有標誌 g，那麼 match() 方法就只能在 stringObject 中執行一次匹配。若是沒有找到任何匹配的文本， match() 將返回 null。不然，它將返回一個數組，其中存放了與它找到的匹配文本有關的信息。該數組的第 0 個元素存放的是匹配文本，而其他的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規的數組元素以外，返回的數組還含有兩個對象屬性。 index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置，input 屬性聲明的是對 stringObject 的引用。

若是 regexp 具備標誌 g，則 match() 方法將執行全局檢索，找到 stringObject 中的全部匹配子字符串。若沒有找到任何匹配的子串，則返回 null。若是找到了一個或多個匹配子串，則返回一個數組。不過全局匹配返回的數組的內容與前者大不相同，它的數組元素中存放的是 stringObject 中全部的匹配子串，並且也沒有 index 屬性或 input 屬性。

示例：

不帶修飾符g

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /([^?&=]+)=([^?&=])*/;
3 var result = url.match(reg);
4 console.log(result);    //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]
5 console.log(result.index);  //21
6 console.log(result.input);  //http://www.baidu.com?a=1&b=2&c=3

帶修飾符g

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /([^?&=]+)=([^?&=])*/g;
3 var result = url.match(reg);
4 console.log(result);    //["a=1", "b=2", "c=3"]
5 console.log(result.index);  //undefined
6 console.log(result.input);  //undefined

發現不同的地方了嗎，把函數描述好好讀一遍，就明白了^_^

二、replace函數

用法：stringObject.replace(regexp/substr,replacement)

返回值：一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或全部匹配以後獲得的。

描述：字符串 stringObject 的 replace() 方法執行的是查找並替換的操做。它將在 stringObject 中查找與 regexp 相匹配的子字符串，而後用 replacement 來替換這些子串。若是 regexp 具備全局標誌 g，那麼 replace() 方法將替換全部匹配的子串。不然，它只替換第一個匹配子串。

replacement 能夠是字符串，也能夠是函數。若是它是字符串，那麼每一個匹配都將由字符串替換。可是 replacement 中的 $ 字符具備特定的含義。以下表所示，它說明從模式匹配獲得的字符串將用於替換。

字符	替換文本
$一、$二、...、$99	與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與 regexp 相匹配的子串。
$`	位於匹配子串左側的文本。
$'	位於匹配子串右側的文本。
$$	直接量符號。（意思就是要替換爲 $ 符號的時候，就寫兩個$）

示例：

不帶修飾符g

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /([^?&=]+)=([^?&=])*/;
3 var url1 = url.replace(reg,function(a,b,c,d,e){
4     console.log(a,b,c,d,e); //a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3
5     return 'ok';
6 })
7 console.log(url1);  //http://www.baidu.com?ok&b=2&c=3

帶修飾符g

1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
2 var reg = /([^?&=]+)=([^?&=])*/g;
3 var url1 = url.replace(reg,function(a,b,c,d,e){
4     console.log(a,b,c,d,e); //執行3次，分別輸出爲：a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3 和 b=2, b, 2, 25, http://www.baidu.com?a=1&b=2&c=3 和 | c=3, c, 3, 29, http://www.baidu.com?a=1&b=2&c=3
5     return 'ok';
6 })
7 console.log(url1);  //http://www.baidu.com?ok&ok&ok

第二個參數爲字符串時

 1 var url = 'http://www.baidu.com?a=1&b=2&c=3';
 2 var reg = /([^?&=]+)=([^?&=])*/;    //不帶修飾符g
 3 var url1 = url.replace(reg,"$&")
 4 console.log(url1);  //http://www.baidu.com?a=1&b=2&c=3
 5 var url1 = url.replace(reg,"$1")
 6 console.log(url1);  //http://www.baidu.com?a&b=2&c=3
 7 var url1 = url.replace(reg,"$2")
 8 console.log(url1);  //http://www.baidu.com?1&b=2&c=3
 9 var url1 = url.replace(reg,"$'")
10 console.log(url1);  //http://www.baidu.com?&b=2&c=3&b=2&c=3
11 
12 var reg = /([^?&=]+)=([^?&=])*/g;   //帶修飾符g
13 var url1 = url.replace(reg,"$&")
14 console.log(url1);  //http://www.baidu.com?a=1&b=2&c=3
15 var url1 = url.replace(reg,"$1")
16 console.log(url1);  //http://www.baidu.com?a&b&c
17 var url1 = url.replace(reg,"$2")
18 console.log(url1);  //http://www.baidu.com?1&2&3
19 var url1 = url.replace(reg,"$'")
20 console.log(url1);  //http://www.baidu.com?&b=2&c=3&&c=3&

 

關於正則表達式的語法規則，是一些固定的東西，能夠存下來本身好好背，這裏就不寫了。