JS的replace方法
定義和用法
replace() 方法用于在字符串中用一些字符替換另一些字符,或替換一個(gè)與正則表達(dá)式匹配的子串。
語法
stringObject.replace(regexp/substr,replacement)
參數(shù) | 描述 |
---|---|
regexp/substr |
必需。規(guī)定子字符串或要替換的模式的 RegExp 對(duì)象。 請(qǐng)注意,如果該值是一個(gè)字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉(zhuǎn)換為 RegExp 對(duì)象。 |
replacement | 必需。一個(gè)字符串值。規(guī)定了替換文本或生成替換文本的函數(shù)。 |
返回值
一個(gè)新的字符串,是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。
說明
字符串 stringObject 的 replace() 方法執(zhí)行的是查找并替換的操作。它將在 stringObject 中查找與 regexp 相匹配的子字符串,然后用 replacement 來替換這些子串。如果 regexp 具有全局標(biāo)志 g,那么 replace() 方法將替換所有匹配的子串。否則,它只替換第一個(gè)匹配子串。
replacement 可以是字符串,也可以是函數(shù)。如果它是字符串,那么每個(gè)匹配都將由字符串替換。但是 replacement 中的 $ 字符具有特定的含義。如下表所示,它說明從模式匹配得到的字符串將用于替換。
字符 | 替換文本 |
---|---|
$1、$2、...、$99 | 與 regexp 中的第 1 到第 99 個(gè)子表達(dá)式相匹配的文本。 |
$& | 與 regexp 相匹配的子串。 |
$` | 位于匹配子串左側(cè)的文本。 |
$' | 位于匹配子串右側(cè)的文本。 |
$$ | 直接量符號(hào)。 |
注意:ECMAScript v3 規(guī)定,replace() 方法的參數(shù) replacement 可以是函數(shù)而不是字符串。在這種情況下,每個(gè)匹配都調(diào)用該函數(shù),它返回的字符串將作為替換文本使用。該函數(shù)的第一個(gè)參數(shù)是匹配模式的字符串。接下來的參數(shù)是與模式中的子表達(dá)式匹配的字符串,可以有 0 個(gè)或多個(gè)這樣的參數(shù)。接下來的參數(shù)是一個(gè)整數(shù),聲明了匹配在 stringObject 中出現(xiàn)的位置。最后一個(gè)參數(shù)是 stringObject 本身。
更多基礎(chǔ)實(shí)例可以到這里查看:http://www.dbjr.com.cn/w3school/js/jsref_replace.htm
replace() 方法的參數(shù) replacement 可以是函數(shù)而不是字符串。在這種情況下,每個(gè)匹配都調(diào)用該函數(shù),它返回的字符串將作為替換文本使用。該函數(shù)的第一個(gè)參數(shù)是匹配模式的字符串。接下來的參數(shù) 是與模式中的子表達(dá)式匹配的字符串,可以有 0 個(gè)或多個(gè)這樣的參數(shù)。接下來的參數(shù)是一個(gè)整數(shù),聲明了匹配在 stringObject 中出現(xiàn)的位置。最后一個(gè)參數(shù)是 stringObject 本身。
下文展示了幾種javascript正則表示式的repalce方式,有些方式我們很少在別的地方看到,如第二種和第三方中方法。
//下面的例子用來獲取url的兩個(gè)參數(shù),并返回urlRewrite之前的真實(shí)Url
var reg=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var url="http://www.qidian.com/BookReader/1017141,20361055.aspx";
//方式一,最簡單常用的方式
var rep=url.replace(reg,"$1ShowBook.aspx?bookId=$2&chapterId=$3");
alert(rep);
//方式二 ,采用固定參數(shù)的回調(diào)函數(shù)
var rep2=url.replace(reg,function(m,p1,p2,p3){return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
alert(rep2);
//方式三,采用非固定參數(shù)的回調(diào)函數(shù)
var rep3=url.replace(reg,function(){var args=arguments; return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];});
alert(rep3);
//方法四
//方式四和方法三很類似, 除了返回替換后的字符串外,還可以單獨(dú)獲取參數(shù)
[code]
var bookId;
var chapterId;
function capText()
{
var args=arguments;
bookId=args[2];
chapterId=args[3];
return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];
}
var rep4=url.replace(reg,capText);
alert(rep4);
alert(bookId);
alert(chapterId);
//除了使用replace方法獲取正則表示式的分組外,還可以使用test ,exec方法獲取分組,只是手法有所不同而已
var reg2=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
var m=reg2.exec("http://www.qidian.com/BookReader/1017141,20361055.aspx");
var s="";
//獲取所有的分組
for (i = 0; i < m.length; i++) {
s = s + m[i] + "\n";
}
alert(s);
bookId=m[2];
chapterId=m[3];
alert(bookId);
alert(chapterId);
//使用test方法獲取分組
var reg3=new RegExp("(http://www.qidian.com/BookReader/)(\\d+),(\\d+).aspx","gmi");
reg3.test("http://www.qidian.com/BookReader/1017141,20361055.aspx");
//獲取三個(gè)分組
alert(RegExp.$1);
alert(RegExp.$2);
alert(RegExp.$3);
var str="www.baidu.com";
//str.format("好","q")
str.replace(new RegExp("(\\.)(bai)du","g"),function(){
for(var i=0;i<arguments.length;i++)
{
document.write(arguments[i]+"<br/>");
}
document.write("-------------------------------------------------<br/>");
});
兩個(gè)例子(證明,replace傳入正則參數(shù)和字符傳參數(shù)結(jié)果不同):
alert("123".replace("1",function(){var un;return un;})); //彈出undefined23
alert("123".replace(new RegExp("1"),function(){var un;return un;})); //彈出23
一些實(shí)例介紹:
replace()最簡單的算是能力就是簡單的字符替換。例如:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我想大家運(yùn)行后可以看到結(jié)果,它只替換了首字母。但如果加上正則表達(dá)式結(jié)果就不一樣了!replace()支持正則表達(dá)式,它可以按照正則表達(dá)式的規(guī)則匹配字符或字符串,然后給予替換!
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
但是結(jié)果還是沒有更改,如果您熟悉正則,那這就難不住您。稍加修改就OK了。
<script language="javascript">
var strM = "javascript is a good script language";
//在此將字母a全部替換成字母A
alert(strM.replace(/a/g,"A"));
</script>
還可以這樣,看看效果!
<script language="javascript">
var strM = "javascript is a good script language";
alert(strM.replace(/(javascript)\s*(is)/g,"$1 $2 fun. it $2"));
</script>
我這兒舉的例子都是很簡單的應(yīng)用,replace()在此點(diǎn)上與您使用正則表達(dá)式的能力成正比。您正則表達(dá)式越強(qiáng),呵呵,那您就會(huì)越瘋狂的愛上它。
當(dāng)然,我這兒推薦replace()的原因并不因?yàn)樗芘c正則表達(dá)式合作,而在于它還能與函數(shù)進(jìn)行合作,發(fā)揮出強(qiáng)大的功能。
先看看簡單例子:將所有單詞首字母換成大寫。
<script language="javascript">
var strM = "javascript is a good script language";
function change(word)
{
return word.indexOf(0).toUpperCase()+word.substring(1);
}
alert(strM.replace(/\b\w+\b/g,change));
</script>
由上可知,當(dāng)正則表達(dá)式有"g"標(biāo)志時(shí),代表將處理整個(gè)字符串,即函數(shù)change的變換將應(yīng)用于所有匹配的對(duì)象。而該函數(shù)有三個(gè)或更多參數(shù),具體個(gè)數(shù)視正則表達(dá)式而定。
有了函數(shù)與正則表達(dá)式的配合,replace()處理字符串的功能空前強(qiáng)大起來了!
最后還舉個(gè)例子,將字符串所有單詞倒序,用replace()處理是如此簡單。
<script language="javascript">
var strM = "javascript is a good script language";
function change(word)
{
var result = word.match(/(\w)/g);
if ( result )
{
var str = "";
for ( var i=result.length-1; i>=0; i-- )
{
str += result;
} return str;
}
else
{
return "null";
}
}
alert(strM.replace(/\b(\w)+\b/g,change));
</script>
- javascript replace()用法詳解附實(shí)例代碼
- js 頁面刷新location.reload和location.replace的區(qū)別小結(jié)
- js replace() 文本替換你所不知的
- javascript中使用replaceAll()函數(shù)實(shí)現(xiàn)字符替換的方法
- js正則函數(shù)match、exec、test、search、replace、split使用介紹集合
- js中字符替換函數(shù)String.replace()使用技巧
- Js 回車換行處理的辦法及replace方法應(yīng)用
- JS、replace利用正則表達(dá)式替換SQL所有參數(shù)為指定格式的數(shù)據(jù)
- js replace 與replaceall實(shí)例用法詳解
- JS利用正則配合replace替換指定字符
- JS Replace 全部替換字符的用法小結(jié)
- JS使用replace()方法和正則表達(dá)式進(jìn)行字符串的搜索與替換實(shí)例
- js字符串替換所有的指定字符或文字(推薦replaceAll方法)
- js使用正則實(shí)現(xiàn)ReplaceAll全部替換的方法
- 詳解JavaScript 中的 replace 方法
相關(guān)文章
JS中數(shù)組常用的循環(huán)遍歷你會(huì)幾種
JS 遍歷數(shù)組(循環(huán)數(shù)組)的方式有多種,但你都知道嗎?下面這篇文章主要給大家介紹了關(guān)于JS中數(shù)組常用循環(huán)遍歷的相關(guān)資料,需要的朋友可以參考下2021-06-06JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù),非常實(shí)用,實(shí)現(xiàn)方案也很簡單,需要的朋友可以參考下2016-06-06向大師們學(xué)習(xí)Javascript(視頻與PPT)
在開始之前,先與大家一起認(rèn)識(shí)下這篇文章的主角,世界級(jí)的javascript大牛們:Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas??疵忠苍S挺陌生,但是如果你對(duì)javascript還算熟悉,一定不會(huì)對(duì)他們的作品陌生。2009-12-12Javascript 判斷兩個(gè)IP是否在同一網(wǎng)段實(shí)例代碼
javascript功能的強(qiáng)大之處是我們大家有目共睹的,幾天小編向大家介紹Javascript 判斷兩個(gè)IP是否在同一網(wǎng)段,感興趣的朋友可以參考一下2016-11-11js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼
這篇文章主要介紹了js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02JavaScript實(shí)現(xiàn)拖拽排序的方法詳解
可拖拽排序的菜單效果大家想必都很熟悉,本次我們通過一個(gè)可拖拽排序的九宮格案例來演示其實(shí)現(xiàn)原理,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-05-05微信小程序?qū)崿F(xiàn)分類菜單激活狀態(tài)隨列表滾動(dòng)而自動(dòng)切換效果詳解
這篇文章主要介紹了微信小程序分類菜單激活狀態(tài)跟隨列表滾動(dòng)自動(dòng)切換,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01