快捷導(dǎo)航

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

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

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

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

這有一個(gè)很簡(jiǎn)單的交換兩個(gè)單詞順序的例子，如果不用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); 
})(); 

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

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

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

不過(guò)現(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無(wú)非是捕獲匹配的項(xiàng)然后經(jīng)過(guò)處理，作為返回值進(jìn)行替換，只不過(guò)是函數(shù)的比較給力。
下面看一個(gè)比較實(shí)用的例子，大多數(shù)語(yǔ)言都有的格式化輸出，比如C語(yǔ)言的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); 
})() 

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

復(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); 
})(); 

顯然用對(duì)象的方法要靠譜一點(diǎn)。

同時(shí)，js并沒(méi)有那么嚴(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)在面臨的一個(gè)問(wèn)題是：

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

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

第二種解決辦法：讓使用者自定義一個(gè)標(biāo)志來(lái)替換#{}的標(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)義字符，寫(xiě)的時(shí)候也需要轉(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('測(cè)試1：',str.gsub(obj,/(^|.)(?:(<%)(\w+)(%>))/g)); 
//Swallows may have gone, but there is a time of return,<%how%>,#{how} 
console.log('測(cè)試2：',str.gsub(obj)); 
//<%what%> may have gone, but there is a time of <%how%>,\<%how%>,return 

嘿嘿，貌似和Prototype中的gsub很像了，不過(guò)Prototype中的gsub復(fù)雜一些，原理也不一致，熟悉一下，待會(huì)再仔細(xì)分析Prototype中的gsub方法。

您可能感興趣的文章:

相關(guān)文章

js replace正則表達(dá)式應(yīng)用案例講解
js replace與正則表達(dá)式結(jié)合，可以有效發(fā)揮replace的功效，可以幫助用戶解決替換中的復(fù)制問(wèn)題，接下來(lái)詳細(xì)介紹使用方法，感興趣的朋友可以了解下
2013-01-01
IntersectionObserver判斷是否在可視區(qū)域詳解
這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
JavaScript實(shí)現(xiàn)離開(kāi)頁(yè)面前提示功能【附j(luò)Query實(shí)現(xiàn)方法】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)離開(kāi)頁(yè)面前提示功能,結(jié)合具體實(shí)例形式分析了javascript實(shí)現(xiàn)針對(duì)關(guān)閉頁(yè)面的事件響應(yīng)原理與操作技巧,并附帶jQuery的相應(yīng)實(shí)現(xiàn)方法,需要的朋友可以參考下
2017-09-09
JavaScript使用Replace進(jìn)行字符串替換的方法
這篇文章主要介紹了JavaScript使用Replace進(jìn)行字符串替換的方法,涉及Replace進(jìn)行一次替換與全部替換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個(gè)并不那么常見(jiàn)的功能，你所不知道的事情，感興趣的小伙伴們可以參考一下
2016-08-08
js實(shí)現(xiàn)用于建立新的一行且增加的四個(gè)文本框?yàn)榭盏那冶唤?..
2007-04-04

JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫(huà)漸變效果)

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出一個(gè)DIV框的實(shí)現(xiàn)方法,帶緩沖漸變動(dòng)畫(huà)效果,涉及鼠標(biāo)事件的響應(yīng)及結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)形成動(dòng)畫(huà)漸變效果的相關(guān)技巧,需要的朋友可以參考下

2016-03-03