1. 程式人生 > 實用技巧 >javascript中replace還可以這樣玩

javascript中replace還可以這樣玩

一:常規操作

在平時開發中用replace時,無非就是匹配一個字串,然後替換成要換的,例如↓

"1,2,32".replace(',', '-')
//"1-2,32"
"1,2,32".replaceAll(',', '-')
//"1-2-32"

  同樣也可以用正則

"1,2,32".replace(/,/, '-')
// "1-2,32"
"1,2,32".replace(/,/g, '-')
//"1-2-32"  加了g就和replaceAll一樣的功能了

二:$1-9分組操作

除了我們經常使用的replace()形式stringObject.replace(regexp/substr,replacement)

第二個引數也可以是$1-$9,在替換文本里, 指令碼用 $1 和 $2 表示正則表示式中的小括號匹配項的結果

看例子↓

var re = /(\w+)\s(\w+)/;
var str = 'John Smith';
str.replace(re, '$2, $1'); // "Smith, John"
RegExp.$1; // "John"
RegExp.$2; // "Smith"

 $1就是對應正則裡第一個小括號匹配的值,後面以此遞增

那如果我們多寫了一個呢,看下↓

str.replace(re, '$2, $1, $3')
// "Smith, John, $3"

  他就會以字串的形式替換上,沒有對應的匹配內容,因為前面正則只有兩個小括號分組

 

三:函式操作

replace方法的第二個引數也可以是一個函式,形如:

stringObject.replace(regexp/substr,function(){});

這個函式應該有個return值,表示應該被替換的匹配項。

下面會根據正則的匹配項和捕獲組,分2種情況,總結第二個引數function的具體用法。

情況1.當只有一個匹配項的(即與模式匹配的字串)情況下,會向該函式傳遞三個引數:模式的匹配項,模式匹配項在字串中的位置和原始字串,形如:

stringObject.replace(
	regexp/substr,
	function(match,pos,originalText){}
);

  例子↓

var str = "{a},{b}";
str.replace(/\{\w+\}/g,(match,pos,original)=>{
	console.log(match);
	console.log(pos);
	console.log(original)
})

輸出結果是:
{a}
0
{a},{b}
{b}
4
{a},{b}

  情況2.在正則表示式中定義了多個捕獲組的情況下,傳遞給函式的引數依次是模式的匹配項,第一個捕獲組的匹配項,第二個捕獲組的匹配項……,但是,最後兩個引數依然是模式的匹配項在字串中的位置和原始字串。

例子↓

var str = "{a},{b}";
str.replace(/\{(\w+)\}/g,(match,capture,pos,original)=>{
	console.log(match);
	console.log(capture);
	console.log(pos);
	console.log(original)
})

輸出結果是:
{a}
a
0
{a},{b}
{b}
b
4
{a},{b}

  其實我們還可以用es6的新語法這樣寫↓