深入理解 JavaScript 中的 replace 方法

Nimojs|Blog發表於2013-11-05

  replace方法是屬於String物件的,可用於替換字串

 簡單介紹:

  StringObject.replace(searchValue,replaceValue)

  1. StringObject:字串
  2. searchValue:字串或正規表示式
  3. replaceValue:字串或者函式

 字串替換字串

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

  直接使用字串能讓自己從loser變成hero,但是如果有2個loser就不能一起變成hero了。

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

 正規表示式替換為字串

    '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 匹配結果中對應的分組匹配結果

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

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

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

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

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

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

 replaceValue引數可以是一個函式

  StringObject.replace(searchValue,replaceValue)中的replaceValue可以是一個函式.

  如果replaceValue是一個函式的話那麼,這個函式的arguments會有n+3個引數(n為正則匹配到的次數)

  先看例子幫助理解:

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字串改為小寫

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

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

'<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.使用函式自主實現替換字元

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

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

  2.洗撲克

  需要將ThisNimojs-JavaScript使用正則替換成TJhaivsaNSicmroijpst

相關文章