javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS string replace高级用法

JavaScript中string replace高级用法详解

作者：无风听海

replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,这篇文章主要介绍了JavaScript中string replace高级用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

1. 方法定义

str.replace(searchValue, replaceValue)

参数说明：

参数类型含义
searchValuestring 或 RegExp被替换的目标
replaceValuestring 或 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 …）
offsetmatch 在原字符串中的起始索引
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"

规则：

✅ 工程规范：

5.2 捕获组

let s = "abc123";
let r = s.replace(/([a-z]+)(\d+)/, "$2-$1");
console.log(r); // "123-abc"

5.3 多次匹配

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 => `<span class="highlight">${match}</span>`);
}

let result = highlight("11:22:22:33:44:55", ["11", "22", "33", "11:22:22"]);
console.log(result);
// <span class="highlight">11:22:22</span>:<span class="highlight">33</span>:44:55

特点：

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. 总结与工程规范建议

  1. 简单替换：

    • 字符串模式可用
    • 正则模式可用

  2. 复杂逻辑：

    • 强烈推荐回调函数

  3. 多关键词或多分支：

    • 长词优先
    • 使用 escapeRegExp 转义

  4. 占位符：

    • $1…$n 推荐
    • $& / $`` / $' 仅用于简单调试

  5. 解析 / 结构化数据：

    • 回调收集数据，replace 仅返回字符串

  6. 性能注意：

    • 零宽断言慎用
    • 大文本用回调 + 长词优先策略

到此这篇关于JavaScript中string replace高级用法详解的文章就介绍到这了,更多相关JS string replace高级用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文