在 JavaScript 中替换字符串
替换字符串的方法有多种,包括 replace()
方法、regular expression
、split()
和 join()
一起,以及 PHP str_replace()
方法的副本。
本篇文章讨论了如何在 JavaScript 中复制 PHP str_replace()
函数,以及一起使用 split()
和 join()
方法来替换 JavaScript 中的字符串。你可以在这里找到更多关于 split()
和 join()
的信息。
split()
方法根据 separator
拆分原始字符串。它在不更改原始字符串的情况下输出新的子字符串数组。
join()
函数根据 separator
连接所有数组元素。它返回一个新字符串而不更新原始字符串。
JavaScript 代码:
let message = "This is a dummy text that we want to replace using replace function.";
let new_message = message.split("want").join("do not want");
console.log(new_message);
输出:
"This is a dummy text that we do not want to replace using replace function."
split()
函数在找到 want
的位置拆分 message
并返回两个子字符串 "This is a dummy text that we "
和 " to replace using replace function."
。请记住,它在破坏字符串时不会删除空格。
join()
方法将这两个子字符串与 do not want
连接起来,并输出为 "This is a dummy text, we don't want to replace using replace function."
。
下面的代码演示了每个函数如何操作并提供更详细的输出。
JavaScript 代码:
let message = "This is a dummy text that we want to replace using replace function.";
let split_message = message.split("want")
let new_message = split_message.join("do not want");
console.log(message);
console.log(split_message);
console.log(new_message);
输出:
"This is a dummy text that we want to replace using replace function."
["This is a dummy text that we ", " to replace using replace function."]
"This is a dummy text that we do not want to replace using replace function."
JavaScript 代码:
function str_replace($searchString, $replaceString, $message) {
// We create regext to find the occurrences
var regex;
// If the $searchString is a string
if ( typeof($searchString) == "string" ) {
// Escape all the characters used by regex
$searchString = $searchString.replace(/[.?*+^$[\]\\(){}|-]/g, "\\");
regex = new RegExp("(" + $searchString + ")", "g");
} else {
// Escape all the characters used by regex
$searchString = $searchString.map(function(i) {
return i.replace(/[.?*+^$[\]\\(){}|-]/g, "\\");
});
regex = new RegExp("(" + $searchString.join("|") + ")", "g");
}
// we create the replacement
var replacement;
// If the $searchString is a string
if ( typeof($replaceString) == "string" ) {
replacement = $replaceString;
} else {
// If the $searchString is a string and the $replaceString an array
if ( typeof($searchString) == "string" ) {
replacement = $replaceString[0];
} else {
// If the $searchString and $replaceString are arrays
replacement = function (i) {
return $replaceString[ $searchString.indexOf(i) ];
}
}
}
return $message.replace(regex, replacement);
}
let message = "This is a dummy text that we want to replace using replace function.";
console.log(str_replace("want", "do not want", message));
输出:
"This is a dummy text that we do not want to replace using replace function."
对于上面的示例,str_replace()
方法采用三个参数:$searchString
、$replaceString
和 $message
。
它首先创建 regex
(/[want]/g
),考虑 $searchString
是否属于 string
类型而不是。然后,我们考虑各种情况创建替换
。
例如,如果 $searchString
是否是 string
。如果不是,请检查 $searchString
是否是 string
和 $replaceString
是否是数组或 $searchString
和 $replaceString
是否都是数组。
最后,我们在 replace()
方法中使用此 regex
和 replacement
来获得所需的输出。我们可以优化上面给出的长代码以获得准确的输出。
JavaScript 代码:
function str_replace($search, $replace, $message) {
return $message.replace(new RegExp("(" + (typeof($search) == "string" ?
$search.replace(/[.?*+^$[\]\\(){}|-]/g, "\\") :
$search.map(function(i) {
return i.replace(/[.?*+^$[\]\\(){}|-]/g, "\\")
}).join("|")) + ")", "g"), typeof($replace) == "string" ?
$replace : typeof($search) == "string" ? $replace[0] : function(i) {
return $replace[$search.indexOf(i)]
});
}
let message = "This is a dummy text that we want to replace using replace function.";
console.log(str_replace("want", "do not want", message));
输出:
"This is a dummy text that we do not want to replace using replace function."
相关文章
在 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 中下载文件并显示一个示例。