字符串的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()
})
可以看出正則的佔位符寫法更直觀也更簡便,但函數寫法會更自由。