來一輪帶註釋的demo，徹底搞懂javascript中的replace函數

javascript這門語言一直就像一位帶著面紗的美女，總是看不清，摸不透，一直專註伺服器端，也從來沒有特別重視過，直到最近幾年，javascript越來越重要，越來越通用。最近和前端走的比較近，藉此機會，好好鞏固一下相關知識點。

1.初識replace

在js中有兩個replace函數 一個是location.replace(url) 跳轉到一個新的url
一個string.replace("xx","yy") 替換字元串 返回一個新的字元串，該方法並不改變字元串本身

location.replace(url) 無痕跳轉(將當前鏈接導航到一個新的url 並不保存歷史記錄)
與之相對的是location.href="url" 有痕跳轉(將當前鏈接導航到一個新的url 且保存歷史記錄) 這個沒有比較清晰

string.replace函數 很多初學者，會認為這個跟C#中的Replace一樣，但並不相同，js中replace更靈活。
最基本的用法 就是簡單替換字元串。來看一個例子：

var str = "abcd-abcd-abcd";
var result = str.replace("a", "");
console.log(result);
//輸出 bcd-abcd-abcd
//當第一個參數是一個簡單字元串時，僅替換第一個匹配項

2.走進replace之正則表達式

參數一：正則表達式對象或字面量(支持gi模式) g全局匹配 i忽略大小寫
參數二：要替換的字元串或一個function
可以使用正則表達式的相關引用
如果是function，則替換為function的返回值
此function的參數：

match 匹配的子串。（對應於上述的$&。）
p1,p2, ... 假如replace()方法的第一個參數是一個RegExp 對象，則代表第n個括弧匹配的字元串。（對應於上述的$1，$2等。）

offset 匹配到的子字元串在原字元串中的偏移量。（比如，如果原字元串是“abcd”，匹配到的子字元串是“bc”，那麼這個參數將是1）

string 被匹配的原字元串。

正則表達的引用

$$ 插入一個 "$"。
$& 插入匹配的子串。
$` 插入當前匹配的子串左邊的內容。
$' 插入當前匹配的子串右邊的內容。
$n 假如第一個參數是 RegExp對象，並且 n 是個小於100的非負整數，那麼插入第 n 個括弧匹配的字元串。

 3.來一輪帶註釋的demo，徹底搞懂javascript中的replace函數：

全局匹配：

var str = "abcd-abcd-abcd";
var result = str.replace(/a/g, "e");
console.log(result);
//輸出 ebcd-ebcd-ebcd
//g全局匹配 所有a字元串都將被替換

忽略大小寫匹配：

var str = "abcd-abcd-abcd";
var result = str.replace(/A/i, "e");
console.log(result);
// 輸出 ebcd-abcd-abcd
// 忽略大小寫的匹配 但沒有進行全局匹配 所以只替換第一個a

忽略大小寫且全局匹配：

var str = "abcd-abcd-abcd";
var result = str.replace(/A/gi, "e");
console.log(result);
// 輸出 ebcd-ebcd-ebcd
// 忽略大小寫並全局匹配 所有a都被替換

使用function作為第二參數：

var str = "abcd-abcd-1234";
var result = str.replace(/([a-z]*)-([a-z]*)/gi, function(match,p1,p2,offset,str){
    console.log(match);    //abcd-abcd  匹配的內容
    console.log(p1);    //第一個括弧中匹配的內容
    console.log(p2);    //第二個括弧匹配的內容
    console.log(offset);//0 匹配到的字元串的索引(偏移量) 
    console.log(str);    //原始字元串
    return [p1,p2].join("+");
});
console.log(result);
// 輸出 abcd+abcd+1234
// 原字元串中 abcd-abcd 被匹配後 被替換為function返回的內容

在參數中引用正則表達式匹配項：

var str = "a b";
var result = str.replace(/(\w+)\s(\w+)/gi, "$2 $1");
console.log(result); 
//輸出 b a 
// 這裡的$1 $2分別引用正則表達式中第一個喝第二個括弧匹配的內容

在參數中引用匹配項左側內容：

    var str = 'abc';
    var result = str.replace(/b/g, "$`"); //$`代表匹配字元的左側內容
    console.log(result);
    //輸出： aac

在參數中引用匹配項右側內容：

    var str = 'abc';
    var result = str.replace(/b/g, "$'"); //$'代表匹配字元的右側內容
    console.log(result);
    //輸出： acc

使用正則表達式對象：

 var str = "a b";
 var reg = new RegExp(/(\w+)\s(\w+)/, "gi"); //也可以使用正則表示對象來最為參數
 var result = str.replace(reg, "$2 $1");
 console.log(result); //輸出 b a

有了這些例子 加上開頭的名詞解釋，相信你已經徹底搞懂了javascript中的replace函數！

啥也不說了，大大地點贊吧！！