全面解析JS字符串和正則表達式中的match、replace、exec等函數

正則表達式(regular expression)描述了一種字符串匹配的模式，可以用來檢查一個串是否含有某種子串、將匹配的子串做替換或者從某個串中取出符合某個條件的子串等。

正則表達式由於不經常使用，所以容易經常忘記，下面小編把常用的函數和功能，簡明扼要的羅列在此，以備日後查看：

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

1、test函數

用法：RegExpObject.test(string)

返回：如果字符串string 中含有與RegExpObject 匹配的文本，則返回true，否則返回false。

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

示例：

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

2、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

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

正則表達式不帶修飾符g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/g;console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"]reg.lastIndex = 0; 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個

1、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

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

帶修飾符g

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

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

2、replace函數

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

返回值：一個新的字符串，是用replacement 替換了regexp 的第一次匹配或所有匹配之後得到的。

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

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

示例：

不帶修飾符g

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

帶修飾符g

 var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/g;var url1 = url.replace(reg,function(a,b,c,d,e){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=3return 'ok';})console.log(url1); //http://www.baidu.com?ok&ok&ok

第二個參數為字符串時

var url = 'http://www.baidu.com?a=1&b=2&c=3';var reg = /([^?&=]+)=([^?&=])*/; //不帶修飾符gvar url1 = url.replace(reg,"$&")console.log(url1); //http://www.baidu.com?a=1&b=2&c=3var url1 = url.replace(reg,"$1")console.log(url1); //http://www.baidu.com?a&b=2&c=3var url1 = url.replace(reg,"$2")console.log(url1); //http://www.baidu.com?1&b=2&c=3var url1 = url.replace(reg,"$'")console.log(url1); //http://www.baidu.com?&b=2&c=3&b=2&c=3var reg = /([^?&=]+)=([^?&=])*/g; //帶修飾符gvar url1 = url.replace(reg,"$&")console.log(url1); //http://www.baidu.com?a=1&b=2&c=3var url1 = url.replace(reg,"$1")console.log(url1); //http://www.baidu.com?a&b&cvar url1 = url.replace(reg,"$2")console.log(url1); //http://www.baidu.com?1&2&3var url1 = url.replace(reg,"$'")console.log(url1); //http://www.baidu.com?&b=2&c=3&&c=3&

以上所述是小編給大家介紹的全面解析JS字符串和正則表達式中的match、replace、exec等函數，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！