JavaScript中replace方法深入理解
replace方法是屬于String對象的,可用于替換字符串。
簡單介紹:
StringObject.replace(searchValue,replaceValue)
- StringObject:字符串
- searchValue:字符串或正則表達式
- 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)
- )
參數分別為
- 匹配到的字符串(此例為nimojs@126.com,推薦修改上面代碼的正則來查看匹配到的字符幫助理解)
- 如果正則使用了分組匹配就為多個否則無此參數。(此例的參數就分別為”nimojs”, “@”, “126.com”。推薦修改正則為/nimo/查看控制臺中返回的arguments值)
- 匹配字符串的對應索引位置(此例為0)
- 原始字符串(此例為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);//'微軟雅黑'
- sResultsResult=sResult.replace(/\'/g,'');
- console.log(sResult);//微軟雅黑
- return sResult;
- })//<span style="font-family:微軟雅黑;">demo</span>
最后的小試牛刀
這一節是交給閱讀者發揮的內容:
1.使用函數自主實現替換字符
字符 | 替換文本 |
$& | 與正則相匹配的字符串 |
$` | 匹配字符串左邊的字符 |
$’ | 匹配字符串右邊的字符 |
使用正則但不使用以上替換字符方法來實現有趣的替換字符中的三個實例。
2.洗撲克
需要將ThisNimojs-JavaScript使用正則替換成TJhaivsaNSicmroijpst