快捷導(dǎo)航

字符串的replace方法應(yīng)用淺析

更新時間：2011年12月06日 22:24:15 作者：

按照W3C的說明，String對象的replace方法調(diào)用方式是stringObject.replace(regexp/substr,replacement)。

這兩個參數(shù)都是必須的，replace() 方法的參數(shù) replacement 可以是函數(shù)而不是字符串。在這種情況下，每個匹配都調(diào)用該函數(shù)，它返回的字符串將作為替換文本使用。該函數(shù)的第一個參數(shù)是匹配模式的字符串。接下來的參數(shù)是與模式中的子表達式匹配的字符串，可以有 0 個或多個這樣的參數(shù)。接下來的參數(shù)是一個整數(shù)，聲明了匹配在 stringObject 中出現(xiàn)的位置。最后一個參數(shù)是 stringObject 本身。對于replacement是函數(shù)的情況，給我們提供了很大的便利。

這有一個很簡單的交換兩個單詞順序的例子，如果不用repalce可以這么做:

復(fù)制代碼代碼如下:

 
(function(){ 
var str = 'click dblclick'; 
var result = str.split(/\b/).reverse().join('') 
console.log(result); 
})() 

這么做略顯麻煩，用replace處理則顯得清爽許多：

復(fù)制代碼代碼如下:

 
(function(){ 
var str = 'click dblclick'; 
var result = str.replace(/\b(\w+)(\s+)(\w+)\b/,'$3$2$1'); 
console.log(result); 
})(); 

再看另一個例子——給數(shù)字加上千分位：

復(fù)制代碼代碼如下:

 
(function(){ 
var number = 12345678900; 
var result = (''+number).replace(/(\d)(?=(\d{3})+$)/g,'$1,'); 
console.log(result); 
})(); 

不過現(xiàn)在要扯的是replacement作為函數(shù)的用法，所以多此一舉的把上面的形式改成函數(shù)的形式：

復(fù)制代碼代碼如下:

 
(function(){ 
var str = 'click dblclick'; 
var result = str.replace(/\b(\w+)(\s+)(\w+)\b/,function(all,$1,$2,$3){ 
return $3+$2+$1; 
}); 
console.log(result); 
})(); 

(function(){ 
var number = 12345678900; 
var result = (''+number).replace(/(\d)(?=(\d{3})+$)/g,function(all,$1){ 
return $1 + ','; 
}); 
console.log(result); 
})(); 

所以replace無非是捕獲匹配的項然后經(jīng)過處理，作為返回值進行替換，只不過是函數(shù)的比較給力。
下面看一個比較實用的例子，大多數(shù)語言都有的格式化輸出，比如C語言的printf：

復(fù)制代碼代碼如下:

 
(function(){ 
var str = '%s may have gone, but there is a time of %s'; 
var result = str.replace(/(%s)/g,function(){ 
return 'replacement'; 
}) 
console.log(result); 
})() 

這里有個問題就是，%s都是一樣的，替換出來都是一樣的，而且我們只能按照順序來判斷被替換的是哪一部分，如果添加一段，那么后面所有的都得變。所以我們得傳個變量進去。

復(fù)制代碼代碼如下:

 
(function(){ 
var array = ['Swallows','return']; 
var i = 0; 
var str = '%s may have gone, but there is a time of %s'; 
var result = str.replace(/(%s)/g,function(){ 
return array[i++]; 
}) 
console.log(result); 
})(); 
(function(){ 
var str = '#{what} may have gone, but there is a time of #{how}'; 
var obj = { 
what : 'Swallows', 
how : 'return' 
} 
var result = str.replace(/(?:#{(\w+)})/g,function(all,$1){ 
return obj[$1]; 
}) 
console.log( result); 
})(); 

顯然用對象的方法要靠譜一點。

同時，js并沒有那么嚴(yán)格的類型要求，所以，%s這種形式也成為了局限。直接擯棄，換成我們?nèi)菀桌斫獾男问健?

偽裝成函數(shù)的樣子就是：

復(fù)制代碼代碼如下:

 
(function(){ 
function gsub(str,replaceObj){ 
return str.replace(/(?:#{(\w+)})/g,function(all,$1){ 
return replaceObj[$1]; 
}) 
} 
console.log('gsub結(jié)果:',gsub('#{what} may have gone, but there is a time of #{how}',{ 
what : 'Swallows', 
how : 'return' 
})) 
})(); 

上面的gsub借用了Prototype中的gsub方法名字，雖然Prototype中的gsub并不是用的replace，但是形式上還是很像的。

現(xiàn)在面臨的一個問題是：

#{what}這種形式的沖突問題，有可能字符串里面剛好就有這種形式的字符串，如果不作處理，后果大家都懂的。

第一種解決辦法：正則里面有轉(zhuǎn)義字符，我們也可以有，所以我們干脆在不需要的替換的部分前面加上'\'

第二種解決辦法：讓使用者自定義一個標(biāo)志來替換#{}的標(biāo)志，從而避免沖突。

看第一種方法：

復(fù)制代碼代碼如下:

 
(function(){ 
var str = '#{what} may have gone, but there is a time of #{how},\\#{reserve}'; 
function gsub(str,replaceObj){ 
return str.replace(/(^|.)(?:#{(\w+)})/g,function(all,$1,$2){ 
if($1 == '\\'){ 
return '#{' + $2 +'}'; 
} 
return $1 + replaceObj[$2]; 
}) 
} 
console.log('gsub結(jié)果:',gsub(str,{ 
what : 'Swallows', 
how : 'return' 
})) 
})(); 

上面需要注意的就是'\'在字符串中也是轉(zhuǎn)義字符，寫的時候也需要轉(zhuǎn)義。

第二種方法：

我們把'#{what}'換成<%what%>的形式。

復(fù)制代碼代碼如下:

 
(function(){ 
function gsub(str,replaceObj,regexp){ 
regexp = regexp || /(?:#{(\w+)})/g; 
return str.replace(regexp,function(all,$1){ 
return replaceObj[$1]; 
}) 
} 
var str = '<%what%> may have gone, but there is a time of <%how%>,#{reserve}'; 
console.log('gsub結(jié)果:',gsub(str,{ 
what : 'Swallows', 
how : 'return' 
},/(?:<%(\w+)%>)/g)) 
})(); 

現(xiàn)在把gsub掛到String的原型上面

復(fù)制代碼代碼如下:

 
String.prototype.gsub = function(replaceObj,regexp){ 
regexp = regexp || /(^|.)(?:(#{)(\w+)(}))/g; 
return this.replace(regexp,function(all,$1,$2,$3,$4){ 
if($1 == '\\'){ 
return $2+$3+$4; 
} 
return $1 + replaceObj[$3] ; 
}) 
} 
var str = '<%what%> may have gone, but there is a time of <%how%>,\\<%how%>,#{how}'; 
var obj = { 
what : 'Swallows', 
how : 'return' 
} 
console.log('測試1：',str.gsub(obj,/(^|.)(?:(<%)(\w+)(%>))/g)); 
//Swallows may have gone, but there is a time of return,<%how%>,#{how} 
console.log('測試2：',str.gsub(obj)); 
//<%what%> may have gone, but there is a time of <%how%>,\<%how%>,return 