目录
1. 方法定义
2. 基本用法
2.1 字符串替换（非正则）
2.2 正则替换单次替换全局替换（g）
3. 字符串替换占位符
4. 回调函数替换（推荐工程用法）
示例 1：简单回调替换示例 2：捕获组 + 条件替换示例 3：基于匹配位置替换
5. 正则复杂规则与注意事项
5.1 Alternation (|) 顺序问题5.2 捕获组5.3 多次匹配5.4 用户输入安全
6. 复杂示例：关键词高亮（工程级）
7. 替换结构化数据示例
8. 总结与工程规范建议
1. 方法定义
str.replace(searchValue, replaceValue)
参数说明：
参数类型含义searchValue string 或 RegExp被替换的目标replaceValue string 或 function替换值，可以是字符串或回调函数
返回值：
返回一个新字符串原字符串不改变
2. 基本用法
2.1 字符串替换（非正则）
let s = "hello world";let r = s.replace("world", "JS");console.log(r); // "hello JS"⚠️ 注意：只替换第一个匹配字符串模式不支持全局替换"abcabc".replace("a", "X"); // "Xbcabc"（只替换第一个 a）
2.2 正则替换单次替换let s = "abc123";let r = s.replace(/\d+/, "456");console.log(r); // "abc456"默认只替换第一个匹配使用正则可以匹配复杂模式全局替换（g）
let s = "a1b2c3";let r = s.replace(/\d/g, "X");console.log(r); // "aXbXcX"
3. 字符串替换占位符
当replaceValue是字符串时，可以使用一些占位符：占位符含义示例$&整个匹配字符串"abc123".replace(/\d+/, "[$&]")→"abc[123]"$1…$n捕获组"2026-01-15".replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1")→"01/15/2026"$` 匹配前的内容"foo123bar".replace(/\d+/, "[$]“)→"foo[foo]bar”`$'匹配后的内容"foo123bar".replace(/\d+/, "[$']")→"foo[bar]bar"$$字面$"price=100".replace(/\d+/, "$$$&")→"price=$100"⚠️ 工程注意：$&,$``, $'` 可能影响性能复杂逻辑最好用回调函数
4. 回调函数替换（推荐工程用法）
当replaceValue是函数时，每次匹配都会调用回调：str.replace(regex, function(match, p1, p2, ..., offset, string, groups) { ... });
参数说明：
参数含义match当前匹配的字符串（$&）
p1, p2 …
捕获组（对应 $1, $2 …）
offset match 在原字符串中的起始索引string原始字符串groups命名捕获组对象（ES2018+）
示例 1：简单回调替换let s = "apple 123 banana 456";let r = s.replace(/\d+/g, (match) => `[${match}]`);console.log(r); // "apple [123] banana [456]"示例 2：捕获组 + 条件替换let s = "2026-01-15";let r = s.replace(/(\d{4})-(\d{2})-(\d{2})/, (match, year, month, day) => {return `${day}-${month}-${year}`;});console.log(r); // "15-01-2026"示例 3：基于匹配位置替换let s = "foo123bar456";let r = s.replace(/\d+/g, (match, offset) => {return offset < 6 ? `[${match}]` : `{${match}}`;});console.log(r); // "foo[123]bar{456}"
5. 正则复杂规则与注意事项
5.1 Alternation (|) 顺序问题let s = "abc";console.log(s.replace(/a|abc/, "X")); // "Xbc"console.log(s.replace(/abc|a/, "X")); // "X"
规则：
从左到右匹配第一个匹配成功的分支胜出JS 不会自动选择最长匹配✅ 工程规范：长模式放前面，短模式放后面5.2 捕获组普通括号()会生成捕获组(?:)不捕获let s = "abc123";let r = s.replace(/([a-z]+)(\d+)/, "$2-$1");console.log(r); // "123-abc"5.3 多次匹配全局g会扫描整个字符串每次匹配成功后，指针会移动 match.length零宽匹配（如(?=x)) 会被强制 +1 防止死循环5.4 用户输入安全
当用户输入用作正则：
function escapeRegExp(str) {return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');}
6. 复杂示例：关键词高亮（工程级）
function highlight(text, keywords) {// 长词优先keywords = [...keywords].sort((a,b)=>b.length - a.length);
const regex = new RegExp(keywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'),'gi');
return text.replace(regex, match => `${match}`);}
let result = highlight("11:22:22:33:44:55", ["11", "22", "33", "11:22:22"]);console.log(result);// 11:22:22:33:44:55
特点：
长词优先 → 避免短词覆盖长词转义用户输入 → 安全回调函数 → 可自由控制 HTML 或其他格式
7. 替换结构化数据示例
let str = "key1=123;key2=456";let pairs = [];str.replace(/(\w+)=(\d+)/g, (_, key, value) => {pairs.push({ key, value });});console.log(pairs);// [{key:"key1",value:"123"}, {key:"key2",value:"456"}]注意：replace 回调必须返回字符串，这里我们返回_保持原字符串
8. 总结与工程规范建议
简单替换：
字符串模式可用正则模式可用
复杂逻辑：
强烈推荐回调函数
多关键词或多分支：
长词优先使用escapeRegExp转义
占位符：
$1…$n推荐$& / $`` / $'仅用于简单调试解析 / 结构化数据：回调收集数据，replace 仅返回字符串
性能注意：
零宽断言慎用大文本用回调 + 长词优先策略到此这篇关于JavaScript中string replace高级用法详解的文章就介绍到这了,更多相关JS string replace高级用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:js中字符替换函数String.replace()使用技巧js中关于String对象的replace使用详解js中string之正则表达式replace方法详解Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐) Javascript String.replace的妙用关于JS字符串函数String.replace() JavaScript String.replace函数参数实例说明js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解关于JavaScript中string 的replace javascript笔记 String类replace函数的一些事