在 JavaScript 中替换字符串的所有实例
JavaScript 允许你使用几种方法替换字符串中所有出现的字符或子字符串。
并非所有方法在速度和资源利用率方面都相同,因此在决定最佳方法之前明确定义你的用例非常重要。此外,最佳解决方案取决于你所针对的浏览器,或者更准确地说,取决于浏览器版本。
因此,较旧的浏览器可能无法理解新引入的 JavaScript 功能。例如,replaceAll
方法是最简单和最推荐的选项,但它不适用于任何 Internet Explorer 版本。值得庆幸的是,还有其他方法可以在旧版浏览器中实现相同的结果,如下所述。
它是迄今为止 JavaScript 中最直接的解决方案,特别是因为它是标准库的一部分。你不需要从头开始创建自己的函数,而且这种方法也比大多数其他实现要快得多。
const my_string = "abc 123 abc 456 abc 789 abc";
console.log(my_string.replaceAll("abc", "xyz"));
输出:
"xyz 123 xyz 456 xyz 789 xyz"
上面的示例要求你手动输入原始字符串和替换字符串作为函数参数。如果你想将替换字符串作为变量传递,你可以使用以下方法:
const my_string = "abc 123 abc 456 abc 789 abc";
let rep_string = "xyz";
console.log(my_string.replaceAll("abc", rep_string));
输出:
"xyz 123 xyz 456 xyz 789 xyz"
事实上,你也可以将两个参数作为变量传递。如你所料,你需要做的就是创建另一个变量来存储要替换的子字符串,然后将其作为 replaceAll
方法的第一个参数传递。
const my_string = "abc 123 abc 456 abc 789 abc";
let substring = "abc";
let rep_string = "xyz";
console.log(my_string.replaceAll(substring, rep_string));
输出:
"xyz 123 xyz 456 xyz 789 xyz"
获得相同结果的另一种方法是使用带有 g
标志和 replace()
方法的正则表达式。使用此方法的缺点是速度可能较慢,因此如果执行速度是你的应用程序的优先考虑因素,请尽量避免这种情况。
g
标志代表 global
,如果没有它,如果你尝试执行它,代码将抛出 TypeError
。在使用正则表达式对象和 replace()
方法时,这是一项要求。
const my_string = "abc 123 abc 456 abc 789 abc";
let new_string = my_string.replace(/abc/g, "xyz");
console.log(new_string)
输出:
"xyz 123 xyz 456 xyz 789 xyz"
如上所述,旧浏览器可能无法理解新的 JavaScript 功能,就像 replaceAll()
方法一样。在这些情况下,你可以通过拆分和连接字符串来获得相同的结果。
请记住,在优化方面这是一个非常糟糕的解决方案,因此如果你的代码不适合与旧软件兼容,请避免使用此方法。
const my_string = "abc 123 abc 456 abc 789 abc";
let new_string = my_string.split("abc").join("xyz");
console.log(new_string);
输出:
"xyz 123 xyz 456 xyz 789 xyz"
很明显,一般的解决方案包括使用 split()
来搜索你要搜索的字符串,使用 join()
来替换你要替换的字符串。为了使事情更清楚,这里是你可以将原始字符串和替换字符串作为变量传递而不是硬编码它们的方法:
const my_string = "abc 123 abc 456 abc 789 abc";
original_string = "abc";
replacement_string = "xyz";
let new_string = my_string.split(original_string).join(replacement_string);
console.log(new_string);
输出:
"xyz 123 xyz 456 xyz 789 xyz"
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。