JavaScript replace函数全解析：字符串替换、正则匹配与回调函数

JavaScript作为一种广泛使用的编程语言，早期主要专注于服务器端开发，并未受到足够重视。然而，近年来随着前端技术的快速发展，JavaScript的应用场景日益广泛且重要。本文旨在通过深入探讨相关知识点，帮助开发者巩固和掌握JavaScript的核心技能。

初识replace

1. 初识replace

在JavaScript中，存在两种名为replace的方法：一种是location.replace(url)，用于跳转到指定的新URL；另一种是，用于替换字符串并返回新字符串，原字符串保持不变。

一个string.replace("xx","yy") 替换字符串返回一个新的字符串，该方法并不改变字符串本身

与之相对的是location.href="url"，这种方式实现的是有痕跳转，即导航至新URL的同时会保留历史记录。两者在用户体验和页面导航行为上存在明显差异。

string.replace函数常被初学者误认为与C#中的Replace方法相同，但实际上JavaScript中的replace功能更为灵活。其最基本的应用场景是简单的字符串替换。以下是一个基础示例：


var str = "abcd-abcd-abcd";
var result = str.replace("a", "");
console.log(result);
//输出 bcd-abcd-abcd
//当第一个参数是一个简单字符串时，仅替换第一个匹配项

正则表达式在replace中的应用

2. 走进replace之正则表达式

replace方法的第一个参数可以是正则表达式对象或字面量，支持g（全局匹配）和i（忽略大小写）模式。

第二个参数可以是用于替换的字符串，也可以是一个函数。

在替换字符串中，可以使用正则表达式的相关引用符号。

如果第二个参数是函数，则替换结果为该函数的返回值。

该回调函数接收以下参数：

match：匹配到的子串（对应于$&）。

p1, p2, ...：如果第一个参数是RegExp对象，这些参数代表第n个括号匹配的内容（对应于$1, $2等）。

offset：匹配子串在原字符串中的起始偏移量。例如，若原字符串为“abcd”，匹配子串为“bc”，则偏移量为1。

string：被匹配的原字符串。

正则表达式的引用规则如下：

$$：插入一个美元符号“$”。 $&：插入匹配的子串。 $`：插入当前匹配子串左侧的内容。 $'：插入当前匹配子串右侧的内容。 $n：若第一个参数为RegExp对象，且n为小于100的非负整数，则插入第n个括号匹配的内容。

代码示例与实战演示

3. 带注释的Demo示例，深入理解JavaScript中的replace函数：

全局匹配示例：


var str = "abcd-abcd-abcd";
var result = str.replace(/a/g, "e");
console.log(result);
//输出 ebcd-ebcd-ebcd
//g全局匹配 所有a字符串都将被替换

忽略大小写匹配示例：


var str = "abcd-abcd-abcd";
var result = str.replace(/A/i, "e");
console.log(result);
// 输出 ebcd-abcd-abcd
// 忽略大小写的匹配 但没有进行全局匹配 所以只替换第一个a

忽略大小写且全局匹配示例：


var str = "abcd-abcd-abcd";
var result = str.replace(/A/gi, "e");
console.log(result);
// 输出 ebcd-ebcd-ebcd
// 忽略大小写并全局匹配 所有a都被替换

使用函数作为第二个参数示例：


var str = "abcd-abcd-1234";
var result = str.replace(/([a-z]*)-([a-z]*)/gi, function(match,p1,p2,offset,str){
  console.log(match);  //abcd-abcd 匹配的内容
  console.log(p1);  //第一个括号中匹配的内容
  console.log(p2);  //第二个括号匹配的内容
  console.log(offset);//0 匹配到的字符串的索引(偏移量) 
  console.log(str);  //原始字符串
  return [p1,p2].join("+");
});
console.log(result);
// 输出 abcd+abcd+1234
// 原字符串中 abcd-abcd 被匹配后 被替换为function返回的内容

在参数中引用正则表达式匹配项示例：


var str = "a b";
var result = str.replace(/(\w+)\s(\w+)/gi, "$2 $1");
console.log(result); 
//输出 b a 
// 这里的$1 $2分别引用正则表达式中第一个喝第二个括号匹配的内容

在参数中引用匹配项左侧内容示例：


 var str = 'abc';
  var result = str.replace(/b/g, "$`"); //$`代表匹配字符的左侧内容
  console.log(result);
  //输出： aac

在参数中引用匹配项右侧内容示例：


 var str = 'abc';
  var result = str.replace(/b/g, "$'"); //$'代表匹配字符的右侧内容
  console.log(result);
  //输出： acc

使用正则表达式对象示例：


 var str = "a b";
 var reg = new RegExp(/(\w+)\s(\w+)/, "gi"); //也可以使用正则表示对象来最为参数
 var result = str.replace(reg, "$2 $1");
 console.log(result); //输出 b a

结合上述示例与基础名词解释，相信读者已能全面掌握JavaScript中replace函数的使用方法。

总结

以上介绍了JavaScript中replace函数的详细用法及带注释的Demo，希望能为读者提供帮助。如有任何疑问，欢迎留言，作者将及时回复。

JavaScript中replace函数的用法与正则表达式详解

初识replace

正则表达式在replace中的应用

代码示例与实战演示

实用工具推荐