如何在 JavaScript 中替换字符串的所有出现？

本教程将教你如何在 JavaScript 中替换字符串的所有出现，这意味着在本教程结束时，我们将学习如何从给定字符串中检测给定类型的子字符串，并将其替换为用户提供的另一个给定字符串。

为了在 JavaScript 中替换字符串的所有出现，我们有三种方法，我们将在本教程中学习，它们是：将字符串分割成数组，然后通过在间隙中添加替换内容将其重新连接；使用全局正则表达式和replace() 方法；最后，我们将学习 JavaScript 字符串的replaceAll() 方法。

分割和连接数组

此方法背后的思想是从字符串中找到所需的子字符串，然后分割其他部分并将它们存储在数组中，之后连接所有部分并在它们之间添加给定的替换内容，并将其转换回字符串。

语法

让我们看看它的语法：

const given_string;
const to_replace;
const replacement;
const string_after_splitting = given_string.split(to_replace);
const required_string = string_after_splitting.join(replacement);

在上面的语法中，我们声明了三个字符串：一个是我们想要执行替换的字符串，第二个是我们想要替换的字符串，最后一个是将替换要替换字符串的字符串。

之后，我们使用split() 方法分割 'given_string' 并将其值存储在数组 'string_after_splitting' 中。最后，我们使用 'join' 方法连接数组的元素，并给出一个 'replacement' 字符串，并将其存储在 'required_string' 变量中（这是我们需要的最终答案/字符串）。

示例

让我们在一个示例中实现上述语法，以更好地理解它：

<!DOCTYPE html>
<html>
<body>
   <h3>Please press the button to replace and get the final string after replacement.</h3>
   <input type = "button" onclick = "replace()" value = "Press me">
</body>
   <script>
      function replace(){
         const given_string = "In this string, every a is going to be a large a";
         const to_replace = 'a';
         const replacement = 'A';

         const string_after_splitting = given_string.split(to_replace);
         const required_string = string_after_splitting.join(replacement);

         document.write("Previous string was: " + given_string+ "<br>"+"After replacement string is: " + required_string)
      }
   </script>
</html>

使用全局正则表达式和 replace() 方法

此方法是字符串 replace() 函数的应用。在这种方法中，我们将要替换的字符串声明为具有全局作用域的正则表达式，并将使用提供的替换字符串搜索和替换它。

语法

让我们看看它的语法并了解它是如何工作的：

const given_string;
const to_replace = new RegExp(to_replace_string, 'g');
const replacement;
const required_string = given_string.replace(to_replace, replacement);

示例

让我们在一个示例中实现上述语法，以更好地理解它：

<!DOCTYPE html>
<html>
<body>
   <h3>Please press the button to replace and get the final string after replacement.</h3>
   <input type = "button" onclick = "replace()" value = "Press me">
</body>
<script>
   function replace(){
      const given_string = "In this string, every a is going to be a large a";
      const to_replace = new RegExp('a','g');
      const replacement = 'A';

      const required_string = given_string.replace(to_replace, replacement);
      document.write("Previous string was: " + given_string+ "<br>" + "After replacement string is: " + required_string)
   }
</script>
</html>

使用 JavaScript 字符串的 replaceAll() 方法

此方法类似于replace() 方法，但唯一的区别在于我们在那里使用正则表达式，而在这里我们使用简单的字符串进行替换。让我们直接进入语法，深入了解其工作原理。

语法

const given_string;
const to_replace;
const replacement;
const required_string = given_string.replaceAll(to_replace, replacement);

在上面的语法中，我们声明了三个字符串：一个是我们想要执行替换的字符串，第二个是我们想要替换的字符串，最后一个是将替换要替换字符串的字符串。

之后，我们使用replaceAll() 方法将所有出现的给定字符串替换为提供的替换字符串。

示例

让我们在一个示例中实现上述语法，以更好地理解它：

<!DOCTYPE html>
<html>
<body>
   <h3>Please press the button to replace and get the final string after replacement.</h3>
   <input type = "button" onclick = "replace()" value = "Press me">
</body>
<script>
   function replace(){
      const given_string = "In this string, every a is going to be a large a";
      const to_replace = 'a';
      const replacement = 'A';

      const required_string = given_string.replaceAll(to_replace, replacement);

      document.write("Previous string was: " + given_string+ "<br>"+"After replacement string is: " + required_string);
   }
</script>
</html>

结论

在本教程中，我们学习了如何在 JavaScript 中替换字符串的所有出现。我们学习了如何从给定字符串中检测给定类型的子字符串，并将其替换为用户提供的另一个给定字符串。

在 JavaScript 中替换字符串的所有出现，有三种方法：将字符串分割成数组，然后通过在间隙中添加替换内容将其重新连接；使用全局正则表达式和replace() 方法；最后是 JavaScript 字符串的replaceAll() 方法。

更新于：2022年11月7日

11K+ 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告