正則表達式之你不知道的replace
阿新 • • 發佈:2017-10-03
執行 兩個 引擎 logs blog 學無止境 div 國慶節 另一個
我們都知道js內置類String提供了一個replace方法,可以把指定字符串替換為另一個字符串,他的基礎用法如下:
1 var str="hello world"; 2 3 var str=str.replace("world","js"); 4 5 console.log(str);//輸出"hello js"
replace方法第一個參數還可以是一個正則表達式:
1 var str="hello world"; 2 3 var str=str.replace(/world/,"js"); 4 5 console.log(str);//同樣輸出"hello js"
今天我要說的重點是他的第二個參數,第二個參數其實是一個函數,只不過我們通常采用了簡寫模式,簡單的寫了一個返回值,實際上他的原理是這樣的:
1 var str="hello world"; 2 3 var str=str.replace(/world/,function(){ 4 return "js"; 5 }); 6 7 console.log(str);
那這個函數是怎麽實現替換的呢?我們先來看看這個匿名函數的參數(谷歌瀏覽器打印arguments):
可以看到控制臺輸出了三關鍵個參數,解釋一下,第一個參數是replace方法第一個參數(也就是/world/)匹配到的內容,第二個參數是匹配內容出現的位置索引,第三個參數就是原始字符串
如果你傳入的第一個參數是字符串,replace方法默認替換一次匹配到的內容:如下:
1 var str="hello world world";//把world變成js 2 3 str=str.replace("world","js"); 4 console.log(str);//輸出的是"hello js wolrd"
我們想要的結果是兩個world都變成js,顯然這種辦法不能滿足我們的需求。這時第一個參數就只能傳入一個正則表達式了。
1 var str="hello world world";//把world變成js 2 3 str=str.replace(/world/g,"js"); 4 console.log(str);//輸出"heloo js js"
當我們傳入正則表達式,並且加上全局匹配模式/g,我們再來看看控制臺輸出,打印兩次:
可以發現實際上匹配到幾次,函數就執行了幾次,並且返回匹配到的結果與索引。
對於一般的需求,我們只需要傳遞一個字符串當作第二個參數即可,但是當我們遇到復雜的情況時,就要使用函數去解決了,比如如下場景:
1 var str="hello world world";//把字符串轉換成大寫 2 3 str=str.replace(/world/g,function(){ 4 return arguments[0].toUpperCase(); 5 }); 6 7 console.log(str);
讀到這裏,筆者可以提示你一下,實際上大部分模板引擎實現原理就是這樣,讀者可以自己嘗試這用這個方法去實現一個簡單的模板引擎。筆者這裏就不再多說。最後祝大家國慶節快樂,但是也別忘記學習,學無止境,這樣才能進步。
正則表達式之你不知道的replace