string.prototype.replace 和正則表達式

字符串的replace方法是操作字符串的常用方法之一，但這個方法只有當與正則合併使用時，才能體現出它的強大之處。

語法：str.replace(regexp|substr, newsubStr|function);

返回值： 一個部分或全部匹配由替代模式所取代的新的字符串，因爲字符串是不可變的原始類型。

基礎用法

str.replace(substr, newsubStr);將字符串的一個子字符串，替換爲另一個新的子字符串。比如:

'eabcabcabcabc'.replace('ab','df')//返回'edfcabcabcabc',只替換第一個子串
'abcabcabcabc'.replace(/ab/g,'df')//返回'dfcdfcdfcdfc',由於正則表達式的g,替換掉所有匹配到的`ab`

帶正則的用法

其實前面已經帶了一個簡單的正則，但是這並沒有顯出如虎添翼的效果。想象一個場景，你想把一個類似於’201706‘的字符串替換成’2017-06'的形式,我們可以這樣實現:

'201706'.replace(/(\d{4})(\d{2})/,'$1-$2')//'2017-06'
'13299259212'.replace(/(\d{3})(\d{4})(\d{4})/,'$1-$2-$3')

這個地方主要在於正則的捕獲，上面的正則表達式,\d{4}匹配字符串的前四個數字,\d{2}匹配後兩個數字,分別用小括號包起來，放到後邊對應的$1,$2中,這裏的$1和$2不是字面的意思。而是兩個佔位符,😄

除了$n這個匹配捕獲的佔位符外，還有$&, $`,$'這三個佔位符：
說個題外話,一分鐘前搜了一下，用markdown轉義`字符時，最外層用兩個 ``將裏面的` 包起來就行，看起來像這樣`` $` ``

MDN描述如下:

變量名 代表的值

$$ 插入一個 "$"。

$& 插入匹配的子串。

$` 插入當前匹配的子串左邊的內容。

$' 插入當前匹配的子串右邊的內容。

$n 假如第一個參數是RegExp對象，並且 n 是個小於100的非負整數，那麼插入第 n 個括號匹配的字符串。

前面說了n代表()裏捕獲的z字符串,相當於轉義`，下面說說另外的幾個佔位符

'abc'.replace(/b/,"$`")//aac,b前面是a,所以將b替換成a，得到a（a）c
'abc'.replace(/b/,"$'")//acc,b後面是c,所以將b替換爲c，得到a(c)c
'aaabccc'.replace(/b/,"$`$'")//aaaaaacccccc，你懂的

'abcdefg'.replace(/b|c|f/g,'$&O')//abocodefog,這裏$&分別代表bcf
'abcdefg'.replace(/(ab)c(de)/g,'$&O')//abcdeofg,這裏$&代表abcde
'abcdefg'.replace(/\S{3}/g,'$&O')//abcOdefOg,這裏$&代表abc和def

帶函數的用法

這裏就是將函數作爲replace方法的第二個參數了，可以看作是上面的函數版和加強版

function replacer(match,$1,$2,$3,offset,string){
    console.log('$&',match);
    console.log('$1',$1);//132
    console.log('$2',$2);//9925
    console.log('$3',$3);//9212
    console.log('開始位置',offset);
    console.log('string',string);
    return(`${$1}-${$2}-${$3}`);
}
'13299259212'.replace(/(\d{3})(\d{4})(\d{4})/,replacer)

舉個例子，將’AbCdEfddd’轉換成’ab_cd_efddd’這樣的形式,實現如下：

'AbCdEfddd'.replace(/[A-Z]/g, function(match, index, string){
    if(index === 0){
        return match.toLowerCase()
    }
    return '_' + match.toLowerCase()
})

可以看出正則的佔位符寫法更直觀也更簡便，但函數寫法會更自由。