概要

在前端開發(fā)過程中，字符串的replace方法在數(shù)據(jù)處理中非常常用。本文通過一個關(guān)鍵字高亮顯示的實例和一個文字插值的實例，來說明replace方法如何結(jié)合正則表達(dá)式，從而更加靈活的滿足各種需求。

replace方法基本介紹

函數(shù)參數(shù)和返回值

• regexp (pattern)
  一個RegExp 對象或者其字面量。該正則所匹配的內(nèi)容會被第二個參數(shù)的返回值替換掉。
• substr (pattern)
  一個將被 newSubStr 替換的 字符串。其被視為一整個字符串，而不是一個正則表達(dá)式。僅第一個匹配項會被替換。
• newSubStr (replacement)
  用于替換掉第一個參數(shù)在原字符串中的匹配部分的字符串。該字符串中可以內(nèi)插一些特殊的變量名。參考下面的使用字符串作為參數(shù)。
• function (replacement)
  一個用來創(chuàng)建新子字符串的函數(shù)，該函數(shù)的返回值將替換掉第一個參數(shù)匹配到的結(jié)果。參考下面的指定一個函數(shù)作為參數(shù)。
• 返回值
  一個部分或全部匹配由替代模式所取代的新的字符串。

字符串參數(shù)

• $$ 插入一個 “$”。
• $& 插入匹配的子串。
• $` 插入當(dāng)前匹配的子串左邊的內(nèi)容。
• $’ 插入當(dāng)前匹配的子串右邊的內(nèi)容。
• $n 假如第一個參數(shù)是 RegExp對象，并且 n 是個小于100的非負(fù)整數(shù)，那么插入第 n 個括號匹配的字符串。提示：索引是從1開始。如果不存在第 n個分組，那么將會把匹配到到內(nèi)容替換為字面量。比如不存在第3個分組，就會用“$3”替換匹配到的內(nèi)容。
• $ 這里Name 是一個分組名稱。如果在正則表達(dá)式中并不存在分組（或者沒有匹配），這個變量將被處理為空字符串。只有在支持命名分組捕獲的瀏覽器中才能使用。

案例說明

字符串關(guān)鍵字高亮顯示

將下面加粗的文字包上

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced.

"The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced."
.replace(/(replace\(\)|pattern|replacement)/ig, "<span class='highlight'>$&<\/span>")

"The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced."
.replace(/(replace\(\)|pattern|replacement)/ig, "<span class='highlight'>$1<\/span>")

var str = "(replace\\(\\)|pattern|replacement)";
var reg = new RegExp(str, "gi");
"The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function called for each match. If pattern is a string, only the first occurrence will be replaced."
.replace(reg, "<span class='highlight'>$1<\/span>")

本文給出了三種實現(xiàn)方法：

因為有些低版本瀏覽器并不支持replaceAll方法，所以都采用全局模式即“g”，即全文搜索，全文替換，這樣可以到達(dá)和replaceAll一樣的效果。

• 方法1中，$&表示匹配的內(nèi)容，所以可以直接放到內(nèi)。
• 方法2中，$1表示正則表達(dá)式中第一個匹配的字符串，()表示原子組，$1為第一個匹配的原子組。
• 方法3中，考慮到要匹配的內(nèi)容可能是變化的，所以增加了帶變量的正則表達(dá)式實現(xiàn)。

上面三段代碼的執(zhí)行結(jié)果是一樣的，具體如下：

Mustache插值

我們將下面文字中的Mustache內(nèi)容，按照data中的key值進行替換。

var data = {
    p1: "replace()",
    p2: "replacement",
    p3: "pattern"
};

"The {{p1}} method returns a new string with some or all matches of a pattern replaced by a {{p2}}. The {{p3}} can be a string or a RegExp, and the {{p2}} can be a string or a function called for each match. If {{p3}} is a string, only the first occurrence will be replaced."
.replace(/\{\{\s*(.*?)\s*\}\}/gi, function(str, ...args){
    return data[args[0]];
});

• 由于replace的字符串參數(shù)并不能作為對象的key值，所以采用函數(shù)參數(shù)。
• 在實際的插值過程中，很有可能插值內(nèi)容是不確定的，所以采用擴展運算符，接收所有的匹配值。
• args[0]返回原子組匹配的內(nèi)容，即p1,p2或p3。
• 全局匹配，全局替換，所以所有的p1，p2和p3都會被替換。

執(zhí)行結(jié)果如下：

總結(jié)

到此這篇關(guān)于Javascript中replace方法與正則表達(dá)式結(jié)合使用的文章就介紹到這了,更多相關(guān)js replace與正則結(jié)合使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！