Javascript中replace方法与正则表达式的结合使用教程

2024-04-02 19:04:59 383人浏览八月长安

摘要

目录概要replace方法基本介绍案例说明字符串关键字高亮显示Mustache插值总结概要在前端开发过程中，字符串的replace方法在数据处理中非常常用。本文通过一个关键字高亮显

概要

在前端开发过程中，字符串的replace方法在数据处理中非常常用。本文通过一个关键字高亮显示的实例和一个文字插值的实例，来说明replace方法如何结合正则表达式，从而更加灵活的满足各种需求。

replace方法基本介绍

函数参数和返回值

regexp (pattern)
一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr (pattern)
一个将被 newSubStr 替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
newSubStr (replacement)
用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
function (replacement)
一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。
返回值
一个部分或全部匹配由替代模式所取代的新的字符串。

字符串参数

$$ 插入一个 “$”。
$& 插入匹配的子串。
$` 插入当前匹配的子串左边的内容。
$’ 插入当前匹配的子串右边的内容。
$n 假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始。如果不存在第 n个分组，那么将会把匹配到到内容替换为字面量。比如不存在第3个分组，就会用“$3”替换匹配到的内容。
$ 这里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>")

本文给出了三种实现方法：

因为有些低版本浏览器并不支持replaceAll方法，所以都采用全局模式即“g”，即全文搜索，全文替换，这样可以到达和replaceAll一样的效果。

方法1中，$&表示匹配的内容，所以可以直接放到内。
方法2中，$1表示正则表达式中第一个匹配的字符串，()表示原子组，$1为第一个匹配的原子组。
方法3中，考虑到要匹配的内容可能是变化的，所以增加了带变量的正则表达式实现。

上面三段代码的执行结果是一样的，具体如下：

Mustache插值

我们将下面文字中的Mustache内容，按照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]];
});