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

更新時間：2016年07月01日 09:29:47 作者：錢天兵

這篇文章主要介紹了全面解析JS字符串和正則表達式中的match、replace、exec等函數(shù)的相關(guān)資料,需要的朋友可以參考下

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

正則表達式由于不經(jīng)常使用，所以容易經(jīng)常忘記，下面小編把常用的函數(shù)和功能，簡明扼要的羅列在此，以備日后查看：

RegExp對象的函數(shù)常用的有2個

1、test函數(shù)

用法：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)); // 輸出結(jié)果為 true

2、exec函數(shù)

用法：RegExpObject.exec(string)

返回：返回一個數(shù)組，其中存放匹配的結(jié)果。如果未找到匹配，則返回值為 null。

描述：

exec() 方法的功能非常強大，它是一個通用的方法，而且使用起來也比 test() 方法以及支持正則表達式的 String 對象的方法更為復(fù)雜。

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

但是，當 RegExpObject 是一個全局正則表達式時，exec() 的行為就稍微復(fù)雜一些。它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時，在匹配后，它將把 RegExpObject 的 lastIndex 屬性設(shè)置為匹配文本的最后一個字符的下一個位置。這就是說，您可以通過反復(fù)調(diào)用 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)); //null
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]

正則表達式不帶修飾符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]

發(fā)現(xiàn)不一樣的地方了嗎，把函數(shù)描述好好讀一遍，就明白了^_^

String對象的函數(shù)支持正則的有4個，我們只說其中的2個

1、match函數(shù)

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

返回值：存放匹配結(jié)果的數(shù)組。該數(shù)組的內(nèi)容依賴于 regexp 是否具有全局標志 g。

描述：

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

如果 regexp 沒有標志 g，那么 match() 方法就只能在 stringObject 中執(zhí)行一次匹配。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個數(shù)組，其中存放了與它找到的匹配文本有關(guān)的信息。該數(shù)組的第 0 個元素存放的是匹配文本，而其余的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規(guī)的數(shù)組元素之外，返回的數(shù)組還含有兩個對象屬性。 index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置，input 屬性聲明的是對 stringObject 的引用。

如果 regexp 具有標志 g，則 match() 方法將執(zhí)行全局檢索，找到 stringObject 中的所有匹配子字符串。若沒有找到任何匹配的子串，則返回 null。如果找到了一個或多個匹配子串，則返回一個數(shù)組。不過全局匹配返回的數(shù)組的內(nèi)容與前者大不相同，它的數(shù)組元素中存放的是 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); //21
console.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); //undefined
console.log(result.input); //undefined

發(fā)現(xiàn)不一樣的地方了嗎，把函數(shù)描述好好讀一遍，就明白了^_^

2、replace函數(shù)

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

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

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

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

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

示例：

不帶修飾符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=3
return '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); //執(zhí)行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
return 'ok';
})
console.log(url1); //http://www.baidu.com?ok&ok&ok

第二個參數(shù)為字符串時

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

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

您可能感興趣的文章: