js中的replace方法

本文主要研究字符串方法中的replace方法，該方法主要用於將字符串中符合匹配條件的字串替換成其他的字符串，返回替換後的字符串，且原字符串不變。
語法：

	var newStr = str.replace(regexp|substr, newSubStr|function)

1. 參數1：匹配條件：可以是正則表達式(regexp)或者字符串(substr)

• 如果參數1是字符串的話僅匹配一次。

   var  str = '#home#home'
   var pattern1= 'home'
   var newStr1 = str.replace(pattern1, 'home1') //得到newStr1的結果爲"#home1#home"

• 如果參數1是正則表達式的話

先考慮沒有全局標誌g和捕獲組的情況：

   var  str = '#home#home'
   var pattern2= /home/
   var newStr2 = str.replace(pattern2, 'home1') //得到newStr2的結果爲"#home1#home"

即在沒有全局標誌g和捕獲組的情況下，也是隻匹配一次。
如果在有全局標誌g的情況下：

	var  str = '#home#home'
	var pattern3= /home/g
	var newStr3= str.replace(pattern3, 'home1') //得到newStr3的結果爲"#home1#home1"

即在有全局標誌g的情況下可以實現全局多次匹配。
如果在有捕獲組的情況下：

	var str = "John Smith";
	var pattern4 = /(\w+)\s(\w+)/;
	var newStr4= str.replace(pattern4, 'zyp') //得到newStr4的結果爲"zyp"

即針對參數1pattern是捕獲組的情況，參數2是字符串，那麼該字符串替換第一個捕獲組，其餘的捕獲組被空字符串替換，所以當參數1pattern中存在捕獲組的情況下，參數2一般是一個函數或者特殊變量名（下面將要講到）。
以上考慮的都是參數2是字符串的情況。

2. 參數2：可以是替換字符串( newSubStr)或者是方法(function)

• 如果參數2是替換字符串
  上面針對參數1的幾個例子都是參數2是字符串的情況，還有一種需要注意的情況是：參數2的字符串中可以插入以下特殊的變量名：
  $$ ：插入一個 “$”。
  $& ：插入匹配的子串。
  $` ：插入當前匹配的子串左邊的內容。
  $’ ：插入當前匹配的子串右邊的內容。
  $n ：假如第一個參數是 RegExp對象，並且 n 是個小於100的非負整數，那麼插入第 n 個括號匹配的字符串。索引是從1開始。
  最常見的特殊變量名是 $n：

   var str = "John Smith";
   var pattern5 = /(\w+)\s(\w+)/;
   var newStr5= str.replace(pattern5, '$2 $1') //得到newStr5的結果爲"Smith John"

• 如果參數2是函數
  該函數可能有以下幾個參數：

1. match: 每次匹配得到的字符串。如果正則表達式中含有全局標誌g的話，那麼函數每次匹配到結果函數都會執行一次，即函數會執行多次，每次匹配得到的字符串就是match。

   針對參數match來說，以下例子可以進行說明：

   function styleHyphenFormat(propertyName) {
     function upperToHyphenLower(match) {
       return '-' + match.toLowerCase();
     }
     return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
   }
   var styleFormat = styleHyphenFormat('borderLeftWidth') // styleFormat的結果是"border-left-width"
   

   上述例子應該即是jquery的css函數中的實現，巧用match參數可以有效的避免循環。

2. p1, p2…: 捕獲組匹配到的字符串。如果正則表達式中含有捕獲組的話，
   針對p1,p2…等參數來說，以下例子可以進行說明：

   function replacer(match, p1, p2, p3, offset, string) {
   	console.log(match)
     	return [p1, p2, p3].join(' - ');
   }
   var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); // newString的結果是 abc - 12345 - #$*%
   

   注意上述例子中的match打印出來的結果是‘abc12345#$*%’，即如果pattern中沒有全局標誌g的話，match參數得到的就是match方法中參數1pattern中包含捕獲組情況下得到的數組的第一個元素，關於match方法的介紹，可以參見我的另外一篇博客字符串搜索匹配之match&&exec。

3. offset：每次匹配得到的字符串在源字符串中的偏移量。（比如，如果原字符串是“abcd”，匹配到的子字符串是“bc”，那麼這個參數將是1）

4. string: 被匹配的原字符串。

總結：對於replace方法來說，如果參數1是字符串或者是不帶全局標誌g的正則表達式，那麼只進行一次匹配；如果參數1中帶有全局標誌g，那麼會進行多次匹配，不管參數2是字符串還是函數，都會進行多次替換（如果是函數的話是用函數的返回值進行多次替換）；如果參數1中帶有捕獲組的話，那麼一般參數2如果是函數，那麼函數的p1,p2…等參數對應的就是1，2…等捕獲組捕獲到的子串，參數2如果是字符串的話，$1,$2…等特殊變量對應的就是1，2…等捕獲組捕獲到的子串。

參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#使用字符串作爲參數