JavaScript 中 replace 与全局替换实现详解

作者:木棉时间:2026-10-28 02:54:38浏览:269

本文详细解析 JavaScript 中 String.prototype.replace 方法的语法、参数及正则匹配变量用法,并通过示例演示如何替换指定单词、子表达式及使用函数动态替换。针对 JS 原生缺乏 replaceAll 的问题,提供了基于正则表达式的全局替换方案及验证方法。

replace 方法语法与参数

stringObj.replace(rgExp, replaceText)


参数说明


stringObj


必选项。指定需要执行替换操作的 String 对象或字符串文字。注意,该字符串本身不会被 replace 方法修改,方法返回的是一个新的字符串。


rgExp


必选项。可以是包含正则表达式模式或标志的正则表达式对象,也可以是字符串对象或文字。若 rgExp 非正则表达式对象,系统将自动将其转换为字符串,并执行精确查找;切勿尝试手动将字符串转换为正则表达式。


replaceText


必选项。可以是 String 对象或字符串文字,用于替换 stringObj 中所有匹配 rgExp 的位置。在 JScript 5.5 或更高版本中,replaceText 参数还可以是一个函数,该函数返回替换后的文本。


方法说明


replace 方法返回一个已完成指定替换操作的 stringObj 对象的副本。


以下任意匹配变量均可用于识别最新匹配项及获取匹配的字符串内容。在需要动态决定替换字符串文本的场景中,可使用这些匹配变量。


字符与含义对照


$$ 表示美元符号 $(适用于 JScript 5.5 或更新版本)。


$& 表示 stringObj 中与整个模式匹配的部分(适用于 JScript 5.5 或更新版本)。


$` 表示 stringObj 中位于 $& 所描述匹配之前的部分(适用于 JScript 5.5 或更新版本)。


$' 表示 stringObj 中位于 $& 所描述匹配之后的部分(适用于 JScript 5.5 或更新版本)。


$n 表示捕获的第 n 个子匹配,其中 n 为 1 到 9 的十进制一位数(适用于 JScript 5.5 或更新版本)。


$nn 表示捕获的第 nn 个子匹配,其中 nn 为 01 到 99 的十进制两位数(适用于 JScript 5.5 或更新版本)。


如果 replaceText 为函数,则对于每个匹配的子字符串,调用该函数时会传入 m+3 个参数,其中 m 是 rgExp 中捕获的左括号数量。第一个参数为匹配的子字符串;接下来的 m 个参数为查找中捕获的全部结果;第 m+2 个参数为 stringObj 中匹配出现的偏移量;第 m+3 个参数为 stringObj 本身。最终结果是将每个匹配的子字符串替换为函数调用返回值的字符串。


Replace 方法会更新全局 RegExp 对象的属性。


replace 方法使用示例

代码示例


以下示例演示了 replace 方法将字符串中第一次出现的单词 "The" 替换为 "A" 的用法。


代码如下:

function ReplaceDemo(){
var r, re; // 声明变量。
var ss = "The man hit the ball with the bat.n";
ss += "while the fielder caught the ball with the glove.";
re = /The/g; // 创建正则表达式模式。
r = ss.replace(re, "A"); // 用 "A" 替换 "The"。
return(r); // 返回替换后的字符串。
  }
此外,replace 方法也可用于替换模式中的子表达式。以下范例演示了如何交换字符串中的每一对单词:
function ReplaceDemo(){
var r, re; // 声明变量。
var ss = "The rain in Spain falls mainly in the plain.";
re = /(S+)(s+)(S+)/g; // 创建正则表达式模式。
r = ss.replace(re, "$3$2$1"); // 交换每一对单词。
return(r); // 返回结果字符串。
  }

以下示例(在 JScript 5.5 及更新版本中执行)演示了从华氏度到摄氏度的转换,展示了将函数作为 replaceText 参数的用法。要理解该函数的工作原理,需传递一个包含数值的字符串,数值后紧跟 "F"(例如 "Water boils at 212")。


代码如下:

function f2c(s) {
var test = /(d+(.d*)?)Fb/g; // 初始化模式。
return(s.replace
(test,
function($0,$1,$2) {
return((($1-32) * 5/9) + "C");
  }
  )
  );
  }
document.write(f2c("Water freezes at 32F and boils at 212F."));

实现全局替换的全局方案

由于 JS 原生未提供 replaceAll 方法,而使用 for 循环又存在效率问题,这里提供一个基于正则表达式的解决方案。


JS 代码实现


代码如下:

String.prototype.replaceAll = function(s1,s2){
return this.replace(new RegExp(s1,"gm"),s2);
  }

核心方法为:string.replace(new RegExp(oldString,"gm"),newString))


其中 gm 分别代表 global(全局)和 multiline(多行)。大致原理即如此,该方法可实现替换所有指定字符串。


另一种简单的验证 JS 的方法:


在浏览器地址栏输入


javascript:alert("abcabcabc".replace(new RegExp("a","gm"),"ad"))


这样操作比较省事,至于多行情况是否方便,尚待验证。


orgStr.replace(new RegExp(findStr, 'g'), replaceStr)


这应该可以替换所有匹配项。


如果不用正则表达式


orgStr.replace(findStr, replaceStr) 只能替换第一个匹配项。

作者最新文章