JS的replace方法

2019-11-20 21:30:07

字體：大中小

來源：轉載

供稿：網友

定義和用法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

語法
stringObject.replace(regexp/substr,replacement)

參數	描述
regexp/substr	必需。規定子字符串或要替換的模式的 RegExp 對象。請注意，如果該值是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp 對象。
replacement	必需。一個字符串值。規定了替換文本或生成替換文本的函數。

參數

描述

regexp/substr

必需。規定子字符串或要替換的模式的 RegExp 對象。

請注意，如果該值是一個字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為 RegExp 對象。

replacement

必需。一個字符串值。規定了替換文本或生成替換文本的函數。

返回值

一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。

說明

字符串 stringObject 的 replace() 方法執行的是查找并替換的操作。它將在 stringObject 中查找與 regexp 相匹配的子字符串，然后用 replacement 來替換這些子串。如果 regexp 具有全局標志 g，那么 replace() 方法將替換所有匹配的子串。否則，它只替換第一個匹配子串。

replacement 可以是字符串，也可以是函數。如果它是字符串，那么每個匹配都將由字符串替換。但是 replacement 中的 $ 字符具有特定的含義。如下表所示，它說明從模式匹配得到的字符串將用于替換。

字符	替換文本
$1、$2、...、$99	與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與 regexp 相匹配的子串。
$`	位于匹配子串左側的文本。
$'	位于匹配子串右側的文本。
$$	直接量符號。

注意：ECMAScript v3 規定，replace() 方法的參數 replacement 可以是函數而不是字符串。在這種情況下，每個匹配都調用該函數，它返回的字符串將作為替換文本使用。該函數的第一個參數是匹配模式的字符串。接下來的參數是與模式中的子表達式匹配的字符串，可以有 0 個或多個這樣的參數。接下來的參數是一個整數，聲明了匹配在 stringObject 中出現的位置。最后一個參數是 stringObject 本身。

更多基礎實例可以到這里查看：//www.49028c.com/w3school/js/jsref_replace.htm

replace() 方法的參數 replacement 可以是函數而不是字符串。在這種情況下，每個匹配都調用該函數，它返回的字符串將作為替換文本使用。該函數的第一個參數是匹配模式的字符串。接下來的參數是與模式中的子表達式匹配的字符串，可以有 0 個或多個這樣的參數。接下來的參數是一個整數，聲明了匹配在 stringObject 中出現的位置。最后一個參數是 stringObject 本身。

下文展示了幾種javascript正則表示式的repalce方式，有些方式我們很少在別的地方看到，如第二種和第三方中方法。

復制代碼代碼如下:

//下面的例子用來獲取url的兩個參數，并返回urlRewrite之前的真實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);

//方式二 ,采用固定參數的回調函數
var rep2=url.replace(reg,function(m,p1,p2,p3){return p1+"ShowBook.aspx?bookId="+p3+"&chapterId="+p3});
alert(rep2);

//方式三，采用非固定參數的回調函數
var rep3=url.replace(reg,function(){var args=arguments; return args[1]+"ShowBook.aspx?bookId="+args[2]+"&chapterId="+args[3];});
alert(rep3);

//方法四
//方式四和方法三很類似, 除了返回替換后的字符串外，還可以單獨獲取參數

[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");
//獲取三個分組
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/>");
        });

兩個例子(證明，replace傳入正則參數和字符傳參數結果不同)：

alert("123".replace("1",function(){var un;return un;})); //彈出undefined23
alert("123".replace(new RegExp("1"),function(){var un;return un;})); //彈出23

一些實例介紹：

replace()最簡單的算是能力就是簡單的字符替換。例如：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

我想大家運行后可以看到結果，它只替換了首字母。但如果加上正則表達式結果就不一樣了！replace()支持正則表達式，它可以按照正則表達式的規則匹配字符或字符串，然后給予替換！

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

但是結果還是沒有更改，如果您熟悉正則，那這就難不住您。稍加修改就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> 

　　我這兒舉的例子都是很簡單的應用，replace()在此點上與您使用正則表達式的能力成正比。您正則表達式越強，呵呵，那您就會越瘋狂的愛上它。
　　當然，我這兒推薦replace()的原因并不因為它能與正則表達式合作，而在于它還能與函數進行合作，發揮出強大的功能。
　　先看看簡單例子：將所有單詞首字母換成大寫。

復制代碼代碼如下:

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

　　由上可知，當正則表達式有"g"標志時，代表將處理整個字符串，即函數change的變換將應用于所有匹配的對象。而該函數有三個或更多參數，具體個數視正則表達式而定。
　　有了函數與正則表達式的配合，replace()處理字符串的功能空前強大起來了！
　　最后還舉個例子，將字符串所有單詞倒序，用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> 