如何在 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+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告