Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to replace all occurrences of a string in JavaScript?
This tutorial will teach us how to replace all occurrences of a string in JavaScript which mean by the end of the tutorial we will learn to detect a given type of substring from the given string and replace it will another given string by the user.
To replace all occurrences of a string in JavaScript we have three methods which we are going to see in this tutorial, they are: splitting the string into an array and then joining it back by adding replacement in gaps, with the global regular expression using the replace() method, and at last we will see the replaceAll() method of the strings in JavaScript.
Splitting and Joining the Array
The idea behind this method is to find the required substring from the string and then split the other parts and store them in an array after that join all the parts and add the given replacement between them and convert it back to a string.
Syntax
Let’s look into its syntax −
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);
In the above syntax, we have declared the three strings one is a string in which we want to perform replacements, the second is a string which we want to replace, and the last one is a string that will be the replacement for the string to replace.
After that, we used the split() method to split ‘given_string’ and stored its value in the array ‘string_after_splitting’. At last, we joined the elements of the array using the ‘join’ method and gave a ‘replacement’ string, and stored it in the ‘required_string’ variable (which is our required final answer/string).
Example
Let’s implement the above syntax in an example to get more understanding of it −
<!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>
With Global Regular Expression using replace() Method
This method is the application of the string replace() function. In this method, we will declare the string to replace as a regular expression with global scope and will search and replace it with the provided string for replacement.
Syntax
Let’s see its syntax and understand how it works −
const given_string; const to_replace = new RegExp(to_replace_string, 'g'); const replacement; const required_string = given_string.replace(to_replace, replacement);
Example
Let’s implement the above syntax in an example to get more understanding of it −
<!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>
Using the replaceAll() method of Strings in JavaScript
This method is similar to the replace() method but the only difference is there we were using the regular expression and here we used a simple string to replace. Let’s directly move to the syntax and understand its working in deep.
Syntax
const given_string; const to_replace; const replacement; const required_string = given_string.replaceAll(to_replace, replacement);
In the above syntax, we have declared the three strings one is a string in which we want to perform replacements, the second is the string which we want to replace, and the last one is a string that will be the replacement for the string to replace.
After that, we used the replaceAll() method to replace all occurrences of the given string with the provided string as replacement.
Example
Let’s implement the above syntax in an example to get more understanding of it −
<!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>
Conclusion
In this tutorial, we have learned how to replace all occurrences of a string in JavaScript. We have learned to detect a given type of substring from the given string and to replace it will another given string the user.
To replace all occurrences of a string in JavaScript there are three methods − splitting the string into an array and then joining it back by adding replacement in gaps, with the global regular expression using the replace() method, and at last the replaceAll() method of the strings in JavaScript.
11K+ Views
