JS字串替換

replace() 方法的第二個引數可以使用函數，當匹配時會呼叫該函數，函數的返回值將作為替換文字使用，同時函數可以接收以$為字首的特殊字元，用來參照匹配文字的相關資訊。

範例1

下面程式碼把字串中每個單詞轉換為首字母大寫形式顯示。

var s = 'javascript is script , is not java.';  //定義字串
//定義替換文字函數，引數為第一個子表示式匹配文字
var f = function ($1) {
    //把匹配文字的首字母轉換為大寫
    return $1.substring(0,1).toUpperCase() + $1.substring(1).toLowerCase();}
var a = s.replace(/(bw+b)/g, f);  //匹配文字並進行替換
console.log(a);  //返回字串“JavaScript Is Script ， Is Not Java.”

在上面範例中替換函數的引數為特殊字元“$1”，它表示正規表示式 /(bw+b)/ 中小括號匹配的文字，然後在函數結構內對這個匹配文字進行處理，擷取其首字母並轉換為大寫形式，餘下字元全為小寫，然後返回新處理的字串。replace() 方法是在原文字中使用這個返回的新字串替換掉每次匹配的子字串。

範例2

對於上面的範例還可以進一步延伸，使用小括號來獲取更多匹配資訊。例如，直接利用小括號傳遞單詞的首字母，然後進行大小寫轉換處理，處理結果都是一樣的。

var s = 'javascript is script , is not java.';  //定義字串
var f = function ($1,$2,$3) {  //定義替換文字函數，請注意引數的變化
    return $2.toUpperCase() + $3;
}
var a = s.replace(/(bw+b)/g, f);
console.log(a);

在函數 f() 中，第一個參數列示每次匹配的文字，第二個參數列示第一個小括號的子表示式所匹配的文字，即單詞的首字母，第二個參數列示第二個小括號的子表示式所匹配的文字。

replace() 方法的第二個引數是一個函數，replace() 方法會給它傳遞多個實參，這些實參都包含一定的意思，具體說明如下。

• 第一個參數列示與匹配模式相匹配的文字，如上面範例中每次匹配的單詞字串。
• 其後的引數是與匹配模式中子表示式相匹配的字串，引數個數不限，根據子表示式數而定。
• 後面的引數是一個整數，表示匹配文字在字串中的下標位置。
• 最後一個參數列示字串自身。

範例3

把上面範例中替換文字函數改為如下形式。

var f = function() {
    return arguments[1].toUpperCase() + arguments[2];
}

也就是說，如果不為函數傳遞形參，直接呼叫函數的 arguments 屬性同樣能夠讀取到正規表示式中相關匹配文字的資訊。其中：

• arguments[0]：表示每次匹配的文字，即單詞。
• arguments[1]：表示第一個子表示式匹配的文字，即單詞的首個字母。
• arguments[2]：表示第二個子表示式匹配的文字，即單詞的餘下字母。
• arguments[3]：表示匹配文字的下標位置，如第一個匹配單詞“javascript”的下標位置就是0，以此類推。
• arguments[4]：表示要執行匹配的字串，這裡表示“javascript is script , is not java.”。

範例4

下面程式碼利用函數的 arguments 物件主動獲取 replace() 方法的第一個引數中正規表示式所匹配的詳細資訊。

var s = 'javascript is script , is not java.';  //定義字串
var f = function () {
    for (var i = 0; i < arguments.length; i++) {
        console.log("第" + (i + 1) + "個引數的值："+ arguments[i]);
    }
    console.log("-----------------------------");
}
var a = s.replace(/(bw+b)/g, f);

在函數結構體中，使用 for 迴圈結構遍歷 arguments 屬性時，發現每次匹配單詞時，都會彈出 5 次提示資訊，分別顯示上面所列的匹配文字資訊。其中，arguments[1]、arguments[2] 會根據每次匹配文字的不同，分別顯示當前匹配文字中子表示式匹配的資訊，arguments[3] 顯示當前匹配單詞的下標位置。而 arguments[0] 總是顯示每次匹配的單詞，arguments[4] 總是顯示被操作的字串。

範例5

下面程式碼設計從伺服器端讀取學生成績（JSON格式），然後使用 for 語句把所有資料轉換為字串。再來練習自動提取字串中的分數，並彙總、算出平均分。最後，利用 replace() 方法提取每個分值，與平均分進行比較以決定替換文字的具體資訊。

var scope = {
    "張三" : 56,
    "李四" : 76,
    "王五" : 87,
    "趙六" : 98
}, _scope = "";
for (var id in scope) {  //把JSON資料轉換為字串
    _scope += id + scope[id];
}
var a = _scope.match(/d+/g), sum = 0;  //匹配出所有分值，輸出位陣列
for (var i = 0; i <a.length; i++) {  //遍歷陣列，求總分
    sum += parseFloat(a[i]);  //把元素值轉換為數值後遞加
};
var avg = sum / a.length;  //求平均分
function f() {
    var n = parseFloat(arguments[1]);  //把匹配的分數轉換為數值，第一個子表示式
    return "：" + n + "分" + "(" + ((n > avg) ? ("超出平均分" + (n - avg)) :
    ("低於平均分" + (avg - n))) + "分)<br>";  //設計替換文字的內容
}
var s1 = _scope.replace(/(bw+b)/g, f);  //執行匹配、替換操作
document.write(s1);

執行結果如下：

---