深入理解JavaScript-replace

NimoChu發表於2015-05-06
JavaScript

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

簡單介紹:

String.replace(searchValue,replaceValue)

  1. String:字串
  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引數可以是一個函式

String.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>

最後的小試牛刀

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

洗撲克

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

點此訂閱部落格

若作者顯示不是Nimo（被轉載了），請訪問Github原文進行討論：https://github.com/nimojs/blog/issues/2

相關文章