Javascript中replace方法與正則表達式的結合使用教程

更新時間：2022年09月29日 12:06:57 作者：懶人Ethan

replace方法是javascript涉及到正則表達式中較為復雜的一個方法,嚴格上說應該是string對象的方法,下面這篇文章主要給大家介紹了關于Javascript中replace方法與正則表達式的結合使用的相關資料,需要的朋友可以參考下

概要

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

replace方法基本介紹

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

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

字符串參數(shù)

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

案例說明

字符串關鍵字高亮顯示

將下面加粗的文字包上

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”，即全文搜索，全文替換，這樣可以到達和replaceAll一樣的效果。

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

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

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]];
});