js replace方法第二個參數，遠不止你想的那么強大

js replace() 方法，想必大家都不陌生。

定義和用法：

replace()方法用於在字符串中用一些字符替換另一些字符，或者替換一個與正則表達式匹配的子串。

stringObject.replace(regexp/substr,replacement)

regexp/substr： 必需。規定子字符串或者要替換的模式的RegExp對象。請注意，如果訪值是字符串，則將它作為要檢索的直接量文本模式，而不是首先被轉換為RegExp對象。

replacement： 必需。一個字符串值。規定了替換文本或生成替換文本的函數。

1、普通的字符串

當replacement 為字符串時，如果是普通的字符串，那很簡單，就是將匹配到的字符遠的成該字符串。

var str = 'hello world';
str = str.replace(/world/, 'javascript');
console.log(str) // -> hello javascript;

 

2、特殊標記$

對於replace使用正則，約定了一個特殊標記$

字符	替換文本
$1、$2、... $99	與 regexp 中的第 1 到第 99 個子表達式相匹配的文本。
$&	與regexp相匹配的子串
$`	位於匹配子串左側的文本
$'	位於匹配子串右側的文本
$$	插入一個“$”

1）$i(i: 1 - 99)：表示從左到右，正則子表達式（組）匹配到的文本。

var name = 'Peppa Pig';
name = name.replace(/(\w+)\s* \s*(\w+)/, '$2 $1');
console.log(name); // -> Pig Peppa

var str = '"a", "bc"';
str = str.replace(/"([^"]*)"/g, "'$1'");
console.log(str); // -> 'a','bc'

2) $`（tab鍵上方的字符）：表示匹配字符串文本左邊的文本

var str = 'hello world';
str = str.replace(/world/g, '$`');
console.log(str); // -> hello hello 

3)$'：表示匹配字符串右邊的文本

var str = 'hello world';
str = str.replace(/hello/g, "$'");
console.log(str); // -> world world

4)$&: 表示與正則表達式匹配的全文本

var str = 'hello world';
str = str.replace(/hello world/g, "$& ,fun");
console.log(str); // -> hello world ,fun

// 與$'組合使用
var myString = "javascript";
myString = myString.replace(/java/, "$&$' is ");
console.log(myString); // -> javascript is script

5)$$: 表示插入一個$

var str = '￥20000.00';
str = str.replace(/￥/, "$$");
console.log(str); // -> $20000.00

 

3、第二個參數為函數

var str = 'abcdbc';
str = str.replace(/(b)(c)/g, function() {
    console.log(arguments);
    return '&&';
});
console.log(str);

// 輸出如下：
/*
["bc", "b", "c", 1, "abcdbc"]
0: "bc"
1: "b"
2: "c"
3: 1
4: "abcdbc"
...
["bc", "b", "c", 1, "abcdbc"]
0: "bc"
1: "b"
2: "c"
3: 4
4: "abcdbc"
...
a&&d&&
*/

函數返回值表示用來替換匹配到的元素的字符串,

函數參數表示：

- param 1: 匹配到的字符串
- param 2: 匹配的子字符串
- param 3: 匹配的子字符串
- param 4: 匹配到的字符串在字符串中的位置
- param 5: 原始字符串

note: 如果匹配到的全字符串有多個，每個都會執行一次函數（有多少（n）個子字符串，第二個參數開始到第n個都是表示子串，第n+1為該子串所在全字符串中的索引位置，最后一個參數為整個字符串）

不使用函數和使用函數的區別：

// 不使用函數
str = '<div>"hello & world"</div>';
str = str.replace(/&/g,'&amp');
str = str.replace(/</g,'&lt');
str = str.replace(/>/g,'&gt');
str = str.replace(/"/g,'&quot');
str = str.replace(/'/g,'&#39');
console.log(str);
// output: &lt;div&gt;&quot;hello &amp; world&quot;&lt;/div&gt;

// 使用函數
str = '<div>"hello & world"</div>';
str = str.replace(/[<>\"\'\&']/g,function(a){
    switch(a){
    case '<':
        return '&lt;';
    case '>':
        return '&gt;';
    case '\"':
        return '&quot;';
    case '\'':
        return '&#39;';
    case '\&':
        return '&amp;';
    }
});
console.log(str);
// output: &lt;div&gt;&quot;hello &amp; world&quot;&lt;/div&gt;

單詞首字母大寫

var str = 'please make heath your first proprity';
str = str.replace(/\b\w+\b/g, function(word) {
    return word[0].toUpperCase() + word.slice(1);
});
console.log(str); // -> Please Make Heath Your First Proprity

或者

var str = 'please make heath your first proprity';
str = str.replace(/(^|\s)([a-z])/g, function(word, p1, p2) {
    return p1 + p2.toUpperCase();
});
console.log(str); // -> Please Make Heath Your First Proprity

 

以上示例轉自：https://www.jianshu.com/p/724e85c0941f

使用replace來寫一個模板替換類

var formateStr = function(param, data) {
      return param.replace(/\{#(\w+)#\}/g, function(match, key, aa, dd) {
        console.log(match, key, aa, dd);
        return typeof data[key] === undefined ? '' : data[key];
      });
    };
    // 模板方法
    var Nav = function(data) {
      var _this = this;
      _this.item = '<li><a href="{#hrefUrl#}" title="{#title#}" {#sign#}>{#content#}</a></li>';
      _this.html = '<ul>';
      for(var i = 0, l = data.length; i < l; i++) {
        _this.html += formateStr(_this.item, data[i]);
      }
      _this.html += '</ul>';
      return _this.html;
    };
    // 擴展方法
    var infoNav = function(data) {
      var _this = this;
      _this.info = '<i>{#num#}</i>';
      for (var i = data.length - 1; i >= 0; i--) {
        data[i].content += formateStr(_this.info, data[i]);
      };
      return Nav.call(this, data);
    };

    var objNav = document.getElementById('nav');
    objNav.innerHTML = infoNav([
      {
        hrefUrl : 'http://www.baidu.com',
        title: '這里是百度一下',
        content : '百度一下',
        num: '10',
        sign: 'sign="1"'
      },
      {
        hrefUrl: 'http://www.zhihu.com',
        title: '這里是知乎一下',
        content: '知乎一下',
        num: '10',
        sign: 'sign="2"'
      }
    ])