深刻理解 JavaScript 中的 replace 方法

字符串替換字符串

1	'I am loser!' .replace( 'loser' , 'hero' ) //I am hero!

直接使用字符串能讓本身從loser變成hero，可是若是有2個loser就不能一塊兒變成hero了。

1	'I am loser,You are loser' .replace( 'loser' , 'hero' ); //I am hero,You are loser

正則表達式替換爲字符串

1	'I am loser,You are loser' .replace(/loser/g, 'hero' ) //I am hero,You are hero

使用正則表達式，並將正則的global屬性改成true則能夠讓全部loser都變爲hero

有趣的替換字符

replaceValue能夠是字符串。若是字符串中有幾個特定字符的話，會被轉換爲特定字符串。

字符	替換文本
$&	與正則相匹配的字符串
$`	匹配字符串左邊的字符
$’	匹配字符串右邊的字符
$1,$2,$,3,…,$n	匹配結果中對應的分組匹配結果

使用$&字符給匹配字符加大括號

1 2	var sStr= '討論一下正則表達式中的replace的用法' ; sStr.replace(/正則表達式/, '{$&}' ); //討論一下{正則表達式}中的replace的用法

使用$`和$’字符替換內容

1 2	'abc' .replace(/b/, "$`" ); //aac 'abc' .replace(/b/, "$'" ); //acc

使用分組匹配組合新的字符串

1	'nimojs@126.com' .replace(/(.+)(@)(.*)/, "$2$1" ) //@nimojs

replaceValue參數能夠是一個函數

StringObject.replace(searchValue,replaceValue)中的replaceValue能夠是一個函數.
若是replaceValue是一個函數的話那麼，這個函數的arguments會有n+3個參數（n爲正則匹配到的次數）
先看例子幫助理解：

1 2 3 4 5 6 7

function logArguments(){         console.log(arguments); //["nimojs@126.com", "nimojs", "@", "126.com", 0, "nimojs@126.com"]      return '返回值會替換掉匹配到的目標' } console.log(      'nimojs@126.com' .replace(/(.+)(@)(.*)/,logArguments) )

參數分別爲

1. 匹配到的字符串（此例爲nimojs@126.com,推薦修改上面代碼的正則來查看匹配到的字符幫助理解)

2. 若是正則使用了分組匹配就爲多個不然無此參數。（此例的參數就分別爲」nimojs」, 「@」, 「126.com」。推薦修改正則爲/nimo/查看控制檯中返回的arguments值）

3. 匹配字符串的對應索引位置（此例爲0）

4. 原始字符串(此例爲nimojs@126.com)

使用自定義函數將A-G字符串改成小寫

1 2 3

'JAVASCRIPT' .replace(/[A-G]/g, function (){      return arguments[0].toLowerCase(); }) //JaVaScRIPT

使用自定義函數作回調式替換將行內樣式中的單引號刪除

1 2 3 4 5 6 7

'<span style="font-family:\'微軟雅黑\';">demo</span>' .replace(/\ '[^' ]+\ '/g,function(){           var sResult=arguments[0];      console.log(sResult);//' 微軟雅黑 '      sResult=sResult.replace(/\'/g,' ');      console.log(sResult); //微軟雅黑      return sResult; }) //<span style="font-family:微軟雅黑;">demo</span>

最後的小試牛刀

這一節是交給閱讀者發揮的內容：

1.使用函數自主實現替換字符

字符	替換文本
$&	與正則相匹配的字符串
$`	匹配字符串左邊的字符
$’	匹配字符串右邊的字符

使用正則但不使用以上替換字符方法來實現有趣的替換字符中的三個實例。