replace方法

replace 本身是 JavaScript 字串物件的一個方法，它允許接收兩個引數

replace([RegExp|String],[String|Function])

第1 個引數可以是一個普通的字串或是一個正規表示式 .

第2 個引數可以是一個普通的字串或是一個回撥函式 .

如果第2 個引數是回撥函式，每匹配到一個結果就回撥一次，每次回撥都會傳遞以下引數：

result: 本次匹配到的結果

1, … 9: 正規表示式中有幾個 () ，就會傳遞幾個引數， 1 9 分別代表本次匹配中每個 () 提取的結果，最多 9 個

offset: 記錄本次匹配的開始位置

source: 接受匹配的原始字串

以下是replace 和 JS 正則搭配使用的幾個常見經典案例：

$1$2 …表示第幾個子表示式

（1 ）實現字串的 trim 函式，去除字串兩邊的空格

複製程式碼

String.prototype.trim = function(){

 // 方式一：將匹配到的每一個結果都用 "" 替換

  return this.replace(/(^\s+)|(\s+$)/g,function(){

    return "";

  });

 // 方式二：和方式一的原理相同

  return this.replace(/(^\s+)|(\s+$)/g,'');

};

^s+ 表示以空格開頭的連續空白字元， s+$ 表示以空格結尾的連續空白字元，加上 () 就是將匹配到的結果提取出來，由於是 | 的關係，因此這個表示式最多會 match 到兩個結果集，然後執行兩次替換：

String.prototype.trim = function(){

  /**

   * @param rs ：匹配結果

   * @param $1: 第 1 個 () 提取結果

   * @param $2: 第 2 個 () 提取結果

   * @param offset: 匹配開始位置

   * @param source ：原始字串

   */

  this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){

    //arguments 中的每個元素對應一個引數

    console.log(arguments);

  });

};

 " abcd ".trim();

輸出結果：

[" ", " ", undefined, 0, " abcd "] // 第 1 次匹配結果

[" ", undefined, " ", 5, " abcd "] // 第 2 次匹配結果

（2 ）提取瀏覽器 url 中的引數名和引數值，生成一個 key/value 的物件

function getUrlParamObj(){

  var obj = {};

  // 獲取 url 的引數部分

  var params = window.location.search.substr(1);

  //[^&=]+ 表示不含 & 或 = 的連續字元，加上 () 就是提取對應字串

  params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){

    obj[$1] = $2;

  });

 return obj;

/([&=]+)=([&=]*)/gi 每次匹配到的都是一個完整 key/value, 形如 xxxx=xxx, 每當匹配到一個這樣的結果時就執行回撥，並傳遞匹配到的 key 和 value ，對應到 $1 和 $2

（3 ）在字串指定位置插入新字串

String.prototype.insetAt = function(str,offset){

  // 使用 RegExp() 建構函式建立正規表示式

  var regx = new RegExp("(.{"+offset+"})");

  return this.replace(regx,"$1"+str);

};

 "abcd".insetAt('xyz',2); // 在 b 和 c 之間插入 xyz

// 結果 "abxyzcd"英鎊符號 https://www.gendan5.com/currency/GBP.html

當 offset=2 時，正規表示式為： (^.{2}) . 表示除 \n 之外的任意字元，後面加 {2} 就是匹配以數字或字母組成的前兩個連續字元，加 () 就會將匹配到的結果提取出來，然後透過 replace 將匹配到的結果替換為新的字串，形如：結果 = 結果 +str

（4 ） 將手機號 12988886666 轉化成 129 8888 6666

複製程式碼

function telFormat(tel){

 tel = String(tel);

 // 方式一

  return tel.replace(/(\d{3})(\d{4})(\d{4})/,function (rs,$1,$2,$3){

    return $1+" "+$2+" "+$3

  });

  // 方式二

  return tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1 $2 $3");

}

(\d{3}\d{4}\d{4}) 可以匹配完整的手機號，並分別提取前 3 位、 4-7 位和 8-11 位， "$1 $2 $3" 是在三個結果集中間加空格組成新的字串，然後替換完整的手機號。

替換 XXYY---->YYXX

var str = "aabb";

var reg = /(\w)\1(\w)\2/g

console.log(str.replace(reg, "$2$2$1$1"));//bbaa   

var str = "aabb";

var reg = /(\w)\1(\w)\2/g

console.log(str.replace(reg, function($, $1, $2) {//replace 的第二個引數也可以傳進去一個函式，但是如果要用子表示式，那麼就必須先傳 $, 然後再傳要用的子表示式。

    return $2 + $2 + $1 + $1;// 子表示式用 $ 取的時候要用加號把它們連線起來

}));//bbaa

替換the-first-name-------->theFirstName

var reg = /-(\w)/g; // 因為要操作 f 和 n 讓它們變成大寫，所以要用子表示式的方式傳遞

var str = "the-first-name";

console.log(str.replace(reg, function($, $1){

    return $1.toUpperCase();

}))

3， 字串去重

var str = "aaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbccccccccccccc";

var reg = /(\w)\1*/g;

console.log(str.replace(reg, "$1"));// abc

4 ，實現從後往前每 3 個 0 打個小數點

var str = "10000000000";

var reg = /(?=(\B)(\d{3})+$)/g  

// 從末尾開始，然後找 3 個數字連在一起的 (\d{3})+$ ，然後用 ?= 前面為空就表示正向預查空的地方，

// 最後新增 (\B) 是因為如果 0 的個數為偶數（假設 100000000000 ），那麼就會出現 .100.000.000.000 這樣的情況，所以就要加上非單詞邊界

console.log(str.replace(reg, "."));//10.000.000.000

exec() 方法

該方法是專門為捕獲組而設計的，其接受一個引數，即要應用模式的字串，然後返回包含第一個匹配項資訊的陣列；

在沒有匹配項的情況下返回null 。返回的陣列雖然是 Array 的例項，但是包含兩個額外的屬性： index 和 input

其中index 表示匹配項在字串中的位置，而 input 表示應用字串表示式的字串。

var text = "mom and dad and baby";

var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(text);

console.log(matches.index); //0

console.log(matches.input); //mom and dad and baby

console.log(matches[0]);    //mom and dad and baby

console.log(matches[1]);    //and dad and baby

console.log(matches[2]);    //and baby

對於exec() 方法而言，即使在模式中設定了全域性標誌 g ，它每次也只是返回一個匹配項。在不設定全域性標誌的情況下，在同一個字串上多次呼叫 exec() 方法將始終返回第一個匹配項的資訊。

而在設定全域性標誌的情況下，每次呼叫exec() 則都會在字串中繼續查詢新匹配項，如下例子：

var text = "cat, bat, sat, fat";

var pattern1 = /.at/;

var matches = pattern1.exec(text);

console.log(matches.index); //0

console.log(matches[0]);  //cat

console.log(pattern1.lastIndex); //0

matches = pattern1.exec(text);

console.log(matches.index); //0

console.log(matches[0]);  //cat

console.log(pattern1.lastIndex); //0

var pattern2 = /.at/g;

var matches = pattern2.exec(text);

console.log(matches.index); //0

console.log(matches[0]);  //cat

console.log(pattern2.lastIndex); //3

var matches = pattern2.exec(text);

console.log(matches.index); //5

console.log(matches[0]);  //bat

console.log(pattern2.lastIndex); //8