JavaScript replace 方法详解：首项、全局及第 N 项替换策略

作者：代码拾荒时间：2026-10-30 19:29:03浏览：618

本文深入解析 JavaScript 中 replace 方法的多种使用场景，涵盖直接字符串替换、正则全局替换以及利用分组与联合技巧实现替换指定第 N 个匹配项的高级用法。通过字符串 split/join 与正则表达式两种路径，详细演示如何精准控制替换范围与位置，解决开发中常见的字符串处理痛点。

在 Web 开发实践中，字符串的截取与替换是高频操作，相关细节繁杂且易混淆。本文旨在梳理核心逻辑，提供实用参考。

一、替换首个匹配项

基础字符串替换

let strtest = "0123测试replace456测试replace789测试replace0"
console.log("原字符串：" + strtest)
let outstr = strtest.replace("测试","ceshi")
console.log("输出字符串：" + outstr)
// 原字符串：0123测试replace456测试replace789测试replace0
// 输出字符串：0123ceshireplace456测试replace789测试replace0

正则表达式替换

当正则表达式字面量后未附加任何修饰符时，其行为等同于直接字符串替换，仅处理首次出现的匹配。

let strtest = "0123测试replace456测试replace789测试replace0"
console.log("原字符串：" + strtest)
let outstr = strtest.replace(/测试/, "ceshi")
console.log("输出字符串：" + outstr)
// 原字符串：0123测试replace456测试replace789测试replace0
// 输出字符串：0123ceshireplace456测试replace789测试replace0

二、替换所有匹配项

基于字符串分组的联合处理

let strtest = '0123测试replace456测试replace789测试replace0';
console.log("原字符串：" + strtest)
let arrstr = strtest.split("测试");
let outstr = arrstr.join("ceshi");
console.log("输出字符串：" + outstr)
// 原字符串：0123测试replace456测试replace789测试replace0
// 输出字符串：0123ceshireplace456ceshireplace789ceshireplace0

正则表达式全局替换

语法格式为 /待替换字符串/g 或 /待替换字符串/mgi。

g 标志代表执行全局匹配，即替换所有符合条件的子串；

i 标志表示忽略大小写差异；

m 标志启用多行匹配模式。

上述标志可组合使用，如 gim。

let strtest = "0123测试replace456测试replace789测试replace0"
console.log("原字符串：" + strtest)
let outstr = strtest.replace(/测试/g, "ceshi")
// 另一种写法：
// let reg = new RegExp("测试", "g")
// let outstr = strtest.replace(reg, "ceshi")
console.log("输出字符串：" + outstr)
// 原字符串：0123测试replace456测试replace789测试replace0
// 输出字符串：0123ceshireplace456ceshireplace789ceshireplace0

三、替换第 N 个匹配项

以下以替换第二个匹配项为例进行说明。

基于字符串分组的联合处理

核心思路：首先利用目标字符串对原串进行分组切割，随后根据目标索引将数组拆分为前后两部分，最后通过替换字符串重新拼接。

let num = 2 // 定义替换第二个匹配项
let strtest = '0123测试replace456测试replace789测试replace0';
console.log("原字符串：" + strtest)
let arrstr = strtest.split("测试");
if(arrstr.length < num)
    return
let arrstr1=[],arrstr2=[]
for(let ii=0;ii<arrstr.length;ii++){
    if(ii < num)
        arrstr1.push(arrstr[ii])
    else
        arrstr2.push(arrstr[ii])
}
let outstr = arrstr1.join("测试")+"ceshi"+arrstr2.join("测试");
console.log("输出字符串：" + outstr)
// 原字符串：0123测试replace456测试replace789测试replace0
// (index):59 输出字符串：0123测试replace456ceshireplace789测试replace0

正则表达式实现方案

利用正则跳过首个匹配项，并将第二个匹配项前的内容捕获为变量，从而实现精准替换。

let strtest = '0123测试replace456测试replace789测试replace0';
console.log("原字符串：" + strtest)
let outstr = strtest.replace(/((?:.*?测试.*?){1}.*?)测试/m, "$1-ceshi-")
// ?: 表示：其后边的 pattern 匹配但不获取。匹配项被标识为 $1，后续会引用
// .*? 表示：.* 除 '/n' 之外的任意个任意字符
// {1} 表示：其前边的 pattern 出现一次
// /pattern/m 表示： m 全局查询
console.log("输出字符串：" + outstr)
// 原字符串：0123测试replace456测试replace789测试replace0
// 输出字符串：0123测试replace456测试replace789-ceshi-replace0

参考来源：https://stackoverflow.com/questions/42943096/replace-nth-match-of-matches-with-regex

四、替换指定标记间的内容

基于字符串分组的联合处理

let strtest = '0123<Object>replace456测试replace78</Object>9测试replace0';
let startstr = "<Object>"
let endstr = "</Object>"
if (strtest.indexOf(startstr) > strtest.indexOf(endstr))
    return
console.log("原字符串：" + strtest)
let arr = strtest.split(startstr)
let arr2 = arr[1].split(endstr)
let resultstr = arr2[0]
let outstr = startstr + resultstr + endstr
console.log("输出字符串：" + outstr)
// 原字符串：0123<Object>replace456测试replace78</Object>9测试replace0
// 输出字符串：<Object>replace456测试replace78</Object>
let strtest = '0123<Object>replace456测试replace78</Object>9测试replace0';
let startstr = "<Object>"
let endstr = "</Object>"
if (strtest.indexOf(startstr) > strtest.indexOf(endstr))
    return
console.log("原字符串：" + strtest)
let arr = strtest.split(startstr)
let arr2 = arr[1].split(endstr)
let resultstr = arr2[0]
let outstr = startstr + resultstr + endstr
console.log("输出字符串：" + outstr)
// 原字符串：0123<Object>replace456测试replace78</Object>9测试replace0
// 输出字符串：<Object>replace456测试replace78</Object>

涉及正则表达式方法 replace()、match() 与 exec()。

替换为指定字符串：使用 replace() 方法。

let strtest = '0123<Object>replace456测试replace78</Object>9测试replace0';
console.log("原字符串：" + strtest)
let outstr = strtest.replace(/<Object>(.*?)<\/Object>/m, "-ceshi-") // \ 为转义字符
console.log("输出字符串：" + outstr)
// 原字符串：0123<Object>replace456测试replace78</Object>9测试replace0
// 输出字符串：0123-ceshi-9测试replace0

提取带标记的字符串内容：使用 match() 方法。

let strtest = '0123<Object>replace456测试replace78</Object>9测试replace0';
console.log("原字符串：" + strtest)
let outstr = strtest.match(/<Object>(.*?)<\/Object>/m)
console.log("输出字符串：" + outstr)
// 原字符串：0123<Object>replace456测试replace78</Object>9测试replace0
// 输出字符串：<Object>replace456测试replace78</Object>

处理可能存在多个匹配项的情况：使用 exec() 方法。

let strtest = "这是<Object>要提取的内容</Object>，还有<Object>另一个内容</Object>"
console.log("原字符串：" + strtest)
let regex = /<Object>(.*?)<\/Object>/gm
const matches = []
let match
while ((match = regex.exec(strtest)) !== null) {
    matches.push(match[1])
    console.log(match)
}
console.log("输出全部匹配项：", matches)
// 原字符串：这是<Object>要提取的内容</Object>，还有<Object>另一个内容</Object>
// (2) ["<Object>要提取的内容</Object>", "要提取的内容", index: 2, input: "这是<Object>要提取的内容</Object>，还有<Object>另一个内容</Object>", groups: undefined]
// (2) ["<Object>另一个内容</Object>", "另一个内容", index: 28, input: "这是<Object>要提取的内容</Object>，还有<Object>另一个内容</Object>", groups: undefined]
// 输出全部匹配项： (2) ["要提取的内容", "另一个内容"]

至此，关于 JS replace 取值及替换指定匹配项的讨论结束。如需了解更多相关技巧，请查阅本站往期文章或继续浏览后续内容，感谢支持。

作者最新文章

JavaScript异步发送HTTP请求时怎么优雅地处理错误

2026-11-05 17:10:44

5款主流JS在线运行工具对比：CodePen、JSFiddle与StackBlitz怎么选

2026-11-05 17:04:04

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00