
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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.
- Related Articles
- How to replace all occurrences of a string with another string in Python?
- Python Program to Replace all Occurrences of ‘a’ with $ in a String
- Java Program to replace all occurrences of a given character in a string
- Replace All Occurrences of a Python Substring with a New String?
- How to replace all occurrences of a word in a string with another word in java?
- Java Program to replace all occurrences of given String with new one
- How to replace all dots in a string using JavaScript?
- How can we replace all the occurrences of a substring with another substring within a string in MySQL?
- C++ program to replace all occurrences of string AB with C without using extra space
- Java Program to replace all occurrences of a given character with new character
- How to count the number of occurrences of a character in a string in JavaScript?
- Replace all occurrences of specified element of ArrayList with Java Collections
- How to detect and replace all the array elements in a string using RegExp in JavaScript?
- Find all occurrences of a word in array in JavaScript
- Replace words of a string - JavaScript
