JavaScript replace正则匹配

JavaScript replace正则匹配教程

JavaScript 中,replace() 方法 返回 一个由替换值(replacement)替换一些或所有匹配的模式(pattern)后的 新字符串

模式可以是一个字符串或者一个 正则表达式,替换值可以是一个字符串或者一个每次匹配都要调用的回调 函数。该方法不会修改原字符串。

JavaScript replace()函数详解

语法

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 函数,替换字符串

<!DOCTYPE html> <html> <head> <title>JavaScript replace函数</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var strHaiCoder = "I love JavaScript"; var res = strHaiCoder.replace(/JavaScript/, "Golang"); console.log("Res =", res); </script> </head> </html>

程序运行后,控制台输出如下:

05_javascript replace方法正则表达式.png

首先,我们定义了一个字符串 类型变量 strHaicoder,接着我们使用字符串的 replace 函数将字符串中的 “JavaScript” 替换为了 “Golang”。

字符串全局替换

使用 replace 函数加上 g 标志,全部替换字符串

<!DOCTYPE html> <html> <head> <title>JavaScript replace函数</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var strHaiCoder = "I love JavaScript,and study JavaScript from haicoder"; var res = strHaiCoder.replace(/JavaScript/, "Golang"); console.log("Res =", res); var res2 = strHaiCoder.replace(/JavaScript/g, "Golang"); console.log("Res2 =", res2); </script> </head> </html>

程序运行后,控制台输出如下:

06_javascript replace方法正则表达式.png

在使用 replace 函数替换字符串时,如果正则表达式后面没有 g 标志,那么默认只替换第一个匹配到的字符串,如果加上 g 标志,则会替换全部匹配到的字符串。

字符串忽略大小写替换

使用 replace 函数加上 i 标志,忽略大小写替换字符串

<!DOCTYPE html> <html> <head> <title>JavaScript replace函数</title> <script type="text/javascript"> console.log("嗨客网(www.haicoder.net)"); var strHaiCoder = "I love JavaScript,and study JavaScript from haicoder"; var res = strHaiCoder.replace(/javascript/i, "Golang"); console.log("Res =", res); var res2 = strHaiCoder.replace(/javascript/gi, "Golang"); console.log("Res2 =", res2); </script> </head> </html>

程序运行后,控制台输出如下:

07_javascript replace方法正则表达式.png

在使用 replace 函数替换字符串时,如果正则表达式后面加上 i 标志,那么将会忽略大小写进行匹配替换。

JavaScript replace正则匹配总结

在 JavaScript 中,replace() 方法返回一个由替换值(replacement)替换一些或所有匹配的模式(pattern)后的 新字符串。