JS如何替换字符串-js教程-PHP中文网

JS如何替换字符串

月夜之吻

发布： 2025-08-20 14:12:02

原创

546人浏览过

replace()默认只替换第一个匹配项，需用正则加g标志实现全局替换；replaceAll()则直接替换所有匹配项，语法更简洁，但不支持正则表达式，且兼容性较差。

js如何替换字符串

在JavaScript中，替换字符串主要依赖于String对象的

replace()

登录后复制

方法，它能让你用新的内容替换掉字符串中匹配到的部分。而ES2021引入的

replaceAll()

登录后复制

方法，则提供了一种更直接的方式来替换所有匹配项。

解决方案

JavaScript提供了两种核心方法来替换字符串：

String.prototype.replace()

登录后复制

和

String.prototype.replaceAll()

登录后复制

。

replace()

登录后复制

方法是比较早且广泛使用的一个。它接受两个参数：第一个参数是你要查找的子字符串或正则表达式，第二个参数是用来替换的字符串或一个函数。

如果第一个参数是一个字符串，

replace()

登录后复制

只会替换第一次出现的匹配项。例如：

const originalString = "Hello world, hello JS!";
const newString = originalString.replace("hello", "Hi");
console.log(newString); // 输出: "Hello world, Hi JS!" (只替换了第一个"hello")

登录后复制

如果需要替换所有匹配项，你必须使用正则表达式，并且要带上全局（

登录后复制

）标志：

const originalString = "Hello world, hello JS!";
const newStringRegex = originalString.replace(/hello/g, "Hi");
console.log(newStringRegex); // 输出: "Hi world, Hi JS!" (替换了所有"hello")

登录后复制

replaceAll()

登录后复制

方法是ES2021（ECMAScript 2021）中新增的，它旨在简化全局替换操作。顾名思义，它会替换字符串中所有匹配的子字符串。它的第一个参数必须是字符串，不能是正则表达式（除非该正则表达式不带全局标志，但这通常没有意义，因为

replaceAll

登录后复制

的目的就是全局替换）。

const originalString = "Hello world, hello JS!";
const newStringAll = originalString.replaceAll("hello", "Hi");
console.log(newStringAll); // 输出: "Hi world, Hi JS!"

登录后复制

值得注意的是，无论使用哪种方法，它们都不会修改原始字符串，而是返回一个全新的字符串。这是JavaScript中字符串不可变性原则的体现，一个很重要的概念。

JavaScript中替换字符串时，

replace()

登录后复制

和

replaceAll()

登录后复制

有何区别？

这可能是很多人初次接触字符串替换时会感到困惑的地方，毕竟名字听起来都像是在做替换。核心差异就在于它们处理“多个匹配项”的方式。

replace()

登录后复制

方法，如果传入的是一个普通的字符串作为查找目标，它默认只会替换找到的第一个匹配项。这在很多场景下，比如你只想修正一个单词的首次出现时，非常方便。但如果你想把一个字符串里的所有“猫”都变成“狗”，那么单纯用

replace("猫", "狗")

登录后复制

是不够的，它只会把第一只“猫”变成“狗”，剩下的“猫”依然我行我素。

要让

replace()

登录后复制

实现全局替换，你必须动用正则表达式，并且给这个正则表达式加上一个

登录后复制

（global）标志。比如

/猫/g

登录后复制

，这样它才会地毯式搜索，把所有匹配的“猫”都找出来并替换掉。这无疑增加了学习成本和代码的复杂性，尤其对于不熟悉正则表达式的开发者来说，可能有点头疼。

而

replaceAll()

登录后复制

的出现，就是为了解决这个“全局替换需要正则

登录后复制

标志”的痛点。它生来就是为了替换所有匹配项而设计的，当你传入一个字符串作为查找目标时，它会自动帮你完成全局替换，不需要再额外考虑正则表达式和

登录后复制

标志。这让代码变得更简洁、更直观，一眼就能看出它的意图。

当然，

replaceAll()

登录后复制

是比较新的特性，所以在一些老旧的浏览器环境中可能不被支持。在实际开发中，如果需要考虑广泛的兼容性，可能还是需要回退到

replace()

登录后复制

+ 正则表达式

登录后复制

标志的组合。但如果你的项目目标浏览器环境较新，或者使用了Babel等工具进行转译，那么

replaceAll()

登录后复制

绝对是更优雅的选择。

如何利用正则表达式进行更复杂的字符串替换？

正则表达式（RegExp）在JavaScript字符串替换中扮演着极其强大的角色，它远不止于简单的全局替换。它能让你进行模式匹配、捕获特定内容，甚至根据匹配到的内容动态生成替换字符串。

首先，最基础的，你可以用它来忽略大小写（

登录后复制

标志），或者结合全局（

登录后复制

）标志进行更灵活的替换：

const text = "JavaScript is great. javascript is fun.";
// 替换所有不区分大小写的 "javascript"
const newText = text.replace(/javascript/gi, "JS");
console.log(newText); // 输出: "JS is great. JS is fun."

登录后复制

更高级的用法在于“捕获组”（Capturing Groups）。你可以用括号

()

登录后复制

在正则表达式中定义捕获组，然后通过

登录后复制

等在替换字符串中引用这些捕获到的内容。这在重新格式化字符串时非常有用。

php实现的替换敏感字符串类

191

查看详情

例如，把日期格式从 "YYYY-MM-DD" 转换为 "DD/MM/YYYY"：

const dateString = "今天是2023-10-26，天气晴朗。";
// 匹配年、月、日，并用捕获组捕获
const formattedDate = dateString.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1");
console.log(formattedDate); // 输出: "今天是26/10/2023，天气晴朗。"

登录后复制

而当你需要进行更复杂的、基于逻辑的替换时，

replace()

登录后复制

方法的第二个参数可以是一个函数。这个函数会在每次匹配发生时被调用，它的返回值将作为替换字符串。这个函数接收多个参数：

```
match
```
登录后复制
: 完整的匹配字符串。
```
p1, p2, ...
```
登录后复制
: 对应捕获组的内容。
```
offset
```
登录后复制
: 匹配项在原始字符串中的索引。
```
string
```
登录后复制
: 原始字符串本身。

这简直是字符串替换的瑞士军刀！比如，你想把字符串中的所有单词首字母大写：

const sentence = "hello world, how are you?";
const titleCaseSentence = sentence.replace(/\b(\w)/g, (match, char) => char.toUpperCase());
console.log(titleCaseSentence); // 输出: "Hello World, How Are You?"

登录后复制

再举个例子，把字符串中的所有数字乘以2：

const numbersText = "我买了5个苹果和10个香蕉。";
const doubledNumbers = numbersText.replace(/\d+/g, (match) => parseInt(match) * 2);
console.log(doubledNumbers); // 输出: "我买了10个苹果和20个香蕉。"

登录后复制

通过正则表达式和替换函数，你可以实现几乎任何你想要的字符串转换逻辑，这为处理复杂文本数据提供了极大的灵活性。

在实际项目中，选择哪种字符串替换方法更优？

在实际项目中选择哪种字符串替换方法，其实并没有一个放之四海而皆准的“最优解”，更多的是一种权衡和取舍，取决于你的具体需求、项目环境以及对代码可读性的偏好。

我个人在写代码时，会倾向于这样思考：

如果我只需要替换字符串中第一次出现的某个子串：那么
```
String.prototype.replace()
```
登录后复制
传入一个普通字符串作为查找目标，是我的首选。它直接、意图明确，代码也最简洁。比如，用户输入的名字中可能多打了一个空格，我只想处理第一个。
```
const name = " 张三丰";
const trimmedName = name.replace(" ", ""); // 只移除第一个空格
```
登录后复制
如果我需要替换所有出现的某个固定子串：在现代浏览器环境中，我毫无疑问会选择
```
String.prototype.replaceAll()
```
登录后复制
。它的语义非常清晰，直接表达了“替换所有”的意图，避免了使用正则表达式的额外心智负担，代码也更易读。
```
const comment = "这个评论真是太棒了，棒极了！";
const sanitizedComment = comment.replaceAll("棒", "好"); // 替换所有“棒”
```
登录后复制
但如果项目需要兼容IE或者一些非常老的浏览器版本，那我就不得不回到
```
replace()
```
登录后复制
配合正则表达式
```
g
```
登录后复制
标志的方案了。这是兼容性带来的无奈，但也是现实。
如果我的替换逻辑涉及到模式匹配、捕获组、条件判断或者动态生成替换内容：这时候，正则表达式和
```
replace()
```
登录后复制
方法的函数参数就是我的唯一选择，也是最强大的选择。这种情况下，
```
replaceAll()
```
登录后复制
就无能为力了，因为它不支持正则表达式作为第一个参数（或者说，它不支持带
```
g
```
登录后复制
标志的正则，而没有
```
g
```
登录后复制
标志的正则对
```
replaceAll
```
登录后复制
来说就失去了意义）。

比如，我想把所有的HTML标签替换为空字符串，或者把特定格式的ID进行转换，那就必须依赖正则。
```
const html = "<p>Hello <b>world</b>!</p>";
const plainText = html.replace(/<[^>]+>/g, ""); // 移除所有HTML标签
console.log(plainText); // 输出: "Hello world!"
```
登录后复制
或者，根据匹配到的内容进行大小写转换、数值计算等，那就得用替换函数了。
```
const productCode = "item_123_abc";
// 把下划线后面的数字部分转为大写
const newCode = productCode.replace(/_(\d+)_/g, (match, num) => `_${num.toUpperCase()}_`);
// 实际上这里num是数字，toUpperCase没用，但演示了函数参数的灵活性
// 如果是把数字转成罗马数字，就可以在这里写逻辑
```
登录后复制