[javascript][Regular Expression] String.prototype.replace()

  • 167
  • 0

string.replace 的方法,範例:

var result = "hello".replace("he", "my");

結果

myllo

但這篇主要是講使用 Regular Expression 的 replace,再來個範例:

var result = "hello".replace(/e\w/, "abc");

結果

habclo

沒錯,只要將第一個參數改為 /xxx/ 就是  Regular Expression 的  pattern 囉。

接下來說明 replace 的多載方法

從 mozilla 的 developer 文檔中,看到 String.prototype.replace() 的語法說明

str.replace(regexp|substr, newSubStr|function[, flags])

其中 substr 參數名稱是屬於原本 string 的參數,跟  Regular Expression 無關,

只有第一個參數為 regexp 的時候,才會採用 Regular Expression 的 pattern 來取代字串,

再來示範第二個參數為字串時的範例:

var result = "hello world".replace(/(\w)o/g, "x$1y");

 結果

helxly xwyrld

現在來觀察一下 hello world 如何變成 helxly xwyrld 的,

先看 pattern:

/(\w)o/g
  1. (\w) 只要比對成功就會建立群組,主要看 pattern 有幾個 (),就會建立幾個群組,而且是按照順序給每個群組一個編號(當然也能自己對群組命名)
  2. (\w)o 會比對 o 文字前面的有個 \w (就是一般文字,像是中文、英文、數字,還有底線)
  3. g 會將尋找多個成功的比對,沒有 g 就是只找第一個成功的比對

 從 hello world 可以找到的為 lo 與 wo 兩個成功的比對,

lo 的群組編號1的值為 l
wo 的群組編號1的值為 w

接著看一下要取代文字的部分 x$1y

x 跟 y 都是要取代的文字,而 $1 是指群組1的值,

也就是說 lo 的要被取代的話,要套入上面定義取代方式,x 加上 l 在加上 y,

其中 $1 就是這個比對成功的 l ,就變成取代為 xly,

wo 就會取代成為 xwy。


再來第二個參數是可以傳入 function 的,

function 參數順序為 比對的成功文字、好幾個群組的值(如果有的話)、比對的索引位置、所有文字,

範例:

	var name = 'jerry';
	var result = name.replace(/(\we)(\w)/ig, function(value, g1, g2, position, text)
	{
		return g1;
	});

結果

jery

下面是這次範例的的參數

參數1 value: 永遠是比對成功的值: jer

參數2 g1: 因為有 pattern 有 (\we) 群組所建立出來的參數: je

參數3 g2: 因為有 pattern 有 (\w) 群組所建立出來的參數: r

參數4 position: 0,因為 jer 就是在開頭的索引 0

參數5 text:jerry

所以將 jer 取代為 g1 ,也就是 je ,最後會變成 jery。


 

新手發文,若有錯誤,麻煩回報,感謝。