快捷導(dǎo)航

Javascript中replace方法與正則表達(dá)式的結(jié)合使用教程

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

replace方法是javascript涉及到正則表達(dá)式中較為復(fù)雜的一個(gè)方法,嚴(yán)格上說應(yīng)該是string對象的方法,下面這篇文章主要給大家介紹了關(guān)于Javascript中replace方法與正則表達(dá)式的結(jié)合使用的相關(guān)資料,需要的朋友可以參考下

概要

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

replace方法基本介紹

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

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

字符串參數(shù)

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

案例說明

字符串關(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>")

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

因?yàn)橛行┑桶姹緸g覽器并不支持replaceAll方法，所以都采用全局模式即“g”，即全文搜索，全文替換，這樣可以到達(dá)和replaceAll一樣的效果。

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

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

Mustache插值

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

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