MDN之Web 開發技術【String.prototype.replace()】

replace() 方法返回一個由替換值（replacement）替換一些或所有匹配的模式（pattern）後的新字符串。模式可以是一個字符串或者一個正則表達式，替換值可以是一個字符串或者一個每次匹配都要調用的回調函數。

原字符串不會改變。

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

const regex = /dog/gi;

console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

結果

> "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"
> "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

語法

str.replace(regexp|substr, newSubStr|function)

參數

regexp (pattern)
一個RegExp對象或者其字面量。該正則所匹配的內容會被第二個參數的返回值替換掉。
substr (pattern)
一個將被 newSubStr 替換的 字符串。其被視爲一整個字符串，而不是一個正則表達式。僅第一個匹配項會被替換。
newSubStr (replacement)
用於替換掉第一個參數在原字符串中的匹配部分的字符串。該字符串中可以內插一些特殊的變量名。參考下面的使用字符串作爲參數。
function (replacement)
一個用來創建新子字符串的函數，該函數的返回值將替換掉第一個參數匹配到的結果。參考下面的指定一個函數作爲參數。

返回值

一個部分或全部匹配由替代模式所取代的新的字符串。

描述

該方法並不改變調用它的字符串本身，而只是返回一個新的替換後的字符串。

在進行全局的搜索替換時，正則表達式需包含 g 標誌。

使用字符串作爲參數

替換字符串可以插入下面的特殊變量名：

變量名	代表的值
$$	插入一個 “$”。
$&	插入匹配的子串。
$`	插入當前匹配的子串左邊的內容。
$’	插入當前匹配的子串右邊的內容。
$n	假如第一個參數是 RegExp對象，並且 n 是個小於100的非負整數，那麼插入第 n 個括號匹配的字符串。提示：索引是從1開始

指定一個函數作爲參數

你可以指定一個函數作爲第二個參數。在這種情況下，當匹配執行後，該函數就會執行。 函數的返回值作爲替換字符串。 (注意：上面提到的特殊替換參數在這裏不能被使用。) 另外要注意的是，如果第一個參數是正則表達式，並且其爲全局匹配模式，那麼這個方法將被多次調用，每次匹配都會被調用。

下面是該函數的參數：

變量名	代表的值
match	匹配的子串。（對應於上述的$&。）
p1,p2, ...	假如replace()方法的第一個參數是一個RegExp 對象，則代表第n個括號匹配的字符串。（對應於上述的$1，$2等。）例如，如果是用 /(\a+)(\b+)/ 這個來匹配，p1 就是匹配的 \a+，p2 就是匹配的 \b+。
offset	匹配到的子字符串在原字符串中的偏移量。（比如，如果原字符串是 ‘abcd’，匹配到的子字符串是 ‘bc’，那麼這個參數將會是 1）
string	被匹配的原字符串。
NamedCaptureGroup	命名捕獲組匹配的對象

(精確的參數個數依賴於 replace() 的第一個參數是否是一個正則表達式（RegExp）對象，以及這個正則表達式中指定了多少個括號子串，如果這個正則表達式裏使用了命名捕獲， 還會添加一個命名捕獲的對象)

下面的例子將會使 newString 變成 'abc - 12345 - #$*%'：

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

示例

在 replace() 中使用正則表達式

在下面的例子中，replace() 中使用了正則表達式及忽略大小寫標示。

var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr);  // Twas the night before Christmas...

在 replace() 中使用 global 和 ignore 選項

下面的例子中,正則表達式包含有全局替換(g)和忽略大小寫(i)的選項,這使得replace方法用’oranges’替換掉了所有出現的"apples".

var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");

// oranges are round, and oranges are juicy.
console.log(newstr);

交換字符串中的兩個單詞

下面的例子演示瞭如何交換一個字符串中兩個單詞的位置，這個腳本使用$1 和 $2 代替替換文本。

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
// Smith, John
console.log(newstr);

使用行內函數來修改匹配到的字符。

在這個例子中，所有出現的大寫字母轉換爲小寫，並且在匹配位置前加一個連字符。重要的是，在返回一個替換了的字符串前，在匹配元素前進行添加操作是必要的。

在返回前，替換函數允許匹配片段作爲參數，並且將它和連字符進行連接作爲新的片段。

function styleHyphenFormat(propertyName) {
  function upperToHyphenLower(match) {
    return '-' + match.toLowerCase();
  }
  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}

運行 styleHyphenFormat('borderTop')，將返回 ‘border-top’。

因爲我們想在最終的替換中進一步轉變匹配結果，所以我們必須使用一個函數。這迫使我們在使用toLowerCase()方法前進行評估。如果我們嘗試不用一個函數進行匹配，那麼使用toLowerCase() 方法將不會有效。

var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  // won't work

這是因爲 '$&'.toLowerCase() 會先被解析成字符串字面量（這會導致相同的'$&')而不是當作一個模式。

將華氏溫度轉換爲對等的攝氏溫度

下面的例子演示如何將華氏溫度轉換爲對等的攝氏溫度。華氏溫度用一個數字加一個"F"來表示，這個函數將返回一個數字加"C"來表示的攝氏溫度。例如，如果輸入是 212F，這個函數將返回 100C。如果輸入的數字是 0F，這個方法將返回 “-17.77777777777778C”。

正則表達式test檢查任何數字是否以 F 結尾。華氏溫度通過第二個參數p1進入函數。這個函數基於華氏溫度作爲字符串傳遞給f2c函數設置成攝氏溫度。然後f2c()返回攝氏溫度。這個函數與Perl的 s///e 標誌相似。

function f2c(x)
{
  function convert(str, p1, offset, s)
  {
    return ((p1-32) * 5/9) + "C";
  }
  var s = String(x);
  var test = /(\d+(?:\.\d*)?)F\b/g;
  return s.replace(test, convert);
}

使用行內函數和正則來避免循環

下例把某種模式的字符串轉換爲一個對象數組（其元素爲對象）。

輸入：
一個由 x，- 和 _ 組成的字符串。

x-x_

---x---x---x---加粗樣式

-xxx-xx-x-

_x_x___x___x___

輸出：

一個數組對象。‘x’ 產生一個 ‘on’ 狀態，’-’（連接符）產生一個 ‘off’ 狀態，而 ‘_’ （下劃線）表示 ‘on’ 狀態的長度。

[
  { on: true, length: 1 },
  { on: false, length: 1 },
  { on: true, length: 2 }
  ...
]

代碼片段：

var str = 'x-x_';
var retArr = [];
str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
  if (p1) { retArr.push({ on: true, length: p1.length }); }
  if (p2) { retArr.push({ on: false, length: 1 }); }
});

console.log(retArr);

該代碼片段生成了一個數組，包含三個期望格式的對象，避免了使用 for 循環語句。