JavaScript String.replace() 核心机制与实战应用

replace() 语法基础

MDN 定义的标准语法如下：

str.replace(regexp|substr, newSubStr|function[, flags])

该方法并不修改原字符串，而是返回替换后的新字符串。

参数详解

• regexp: 用于匹配的 RegExp 对象。若使用全局标志 /g，则会替换所有匹配项。
• substr: 用于搜索的具体子字符串。
• newSubStr: 用于替换的普通字符串，可包含特殊插入字符（如 $&, $1）。
• function: 替换回调函数，返回值为最终替换后的内容。
• flags: 非标准参数，在部分环境中可用，通常建议直接在 RegExp 中设置。

字符串替换中的特殊占位符

当第二个参数为字符串时，可嵌入以下特殊字符来引用匹配结果：

• $&: 当前整个匹配的子串。
• $` (反引号): 当前匹配位置之前的字符串片段。
• $': 当前匹配位置之后的字符串片段。
• $$: 插入一个美元符号 $。
• $n / $nn: 引用正则括号内的第 N 个捕获组（例如 $1, $2）。

函数作为替换对象的进阶用法

当使用函数作为返回值时，可以获得极大的灵活性。回调函数的签名如下：

function(matched, p1, p2, ..., offset, string) { ... }

• matched: 完整的匹配串（等同于 $&）。
• p1, p2, ...: 捕获组内容（对应 $1, $2）。
• offset: 匹配串在原字符串中的起始偏移量。
• string: 原始被搜索的字符串。

实战案例：CSS 样式属性的驼峰转换

在前端开发中，经常需要将 CSS 中常用的连字符表示法（如 background-color）转换为 JavaScript 对象属性的驼峰表示法（backgroundColor）。虽然 jQuery 内部已实现了此功能，但我们可以直接使用原生 JS 进行拆解学习。

第1步：定义正则与回调逻辑

我们需要匹配 "-" 后面跟随的小写字母。正则表达式可以写为 -([a-z])，括号用于捕获小写字母以便后续操作。

第2步：扩展原型或直接调用

可以直接创建一个工具函数或在字符串原型上添加方法。以下是直接调用的写法：

// 正则：-([a-z])/ig
// 第一个参数是匹配到的完整内容（如 "-c"），第二个参数是捕获的内容（如 "c"）
var result = 'background-color'.replace(/-([a-z])/ig, function( all, letter ) {
    return letter.toUpperCase();
});
console.log(result); // 输出: backgroundColor

在此代码中：

• all 接收的是 -c 这样的整体匹配。
• letter 接收的是括号内捕获的 c。
• 回调函数将捕获的小写字母转为大写返回，从而实现了去除连字符并首字母大写的效果。

若需封装为一个通用方法（注意在实际生产环境中不建议随意污染原生 prototype）：

String.prototype.toCamelCase = function() {
    return this.replace(/-([a-z])/ig, function( all, letter ) {
        return letter.toUpperCase();
    });
};

var cssText = 'border-bottom';
console.log(cssText.toCamelCase()); // borderBottom

其他常见应用场景

除了命名转换，replace() 还可用于交换文本顺序。例如将 “John Smith” 格式化为 “Smith, John”：

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
console.log(newstr); // Smith, John

以上就是 JavaScript String.replace() 函数学习与应用教程的详细内容，更多关于 JavaScript 高级字符串处理技巧的资料请关注本站其它相关文章！