In this tutorial, we will learn how to globally replace a string in JavaScript, enabling us to recognize and substitute a particular type of substring within a provided string with an alternative string.
This guide explores three techniques for substituting a string in JavaScript throughout its occurrences: the initial approach involves breaking down the string into an array and merging it back together with the replacement inserted in the spaces; the second technique leverages the replace function with a global regular expression; finally, the third method entails using the replaceAll function provided by JavaScript strings.
Array Splitting and Joining
The idea behind this approach involves isolating a specific substring from a given string, partitioning the leftover segments, organizing them into an array, concatenating all segments, inserting the replacement in between, and ultimately transforming the string back to its initial state.
Syntax:
Now let's examine its syntax.
const givenString;
const toReplace;
const replacement;
const stringAfterSplitting = givenString.split(to_replace);
const requiredString = stringAfterSplitting.join(replacement);
The three strings identified in the syntax provided are as follows: the initial string that needs replacement, the desired replacement string, and the substitute string to be utilized.
Subsequently, the "givenstring" was segmented utilizing the split method, and the outcome was stored in the "stringaftersplitting" array. Ultimately, the 'join' method was employed to combine the elements of the array, specifying a 'replacement' string which was then stored in the 'requiredstring' variable, representing our desired end result/string.
Example
In order to deepen your understanding of the syntax mentioned earlier, let's apply it in a practical example.
<!DOCTYPE html>
<html>
<body>
<h3>To obtain the final string after replacement, please press the button.</h3>
<input type = "button" onclick = "replace()" value = "Press me">
</body>
<script>
function replace(){
const givenString = "In this string, every e is going to be a large E";
const toReplace = 'e';
const replacement = 'E';
const stringAfterSplitting = givenString.split(to_replace);
const requiredString = stringAfterSplitting.join(replacement);
document.write("Before replacement string was: " + given_string+ "<br>"+"After replacement string is: " + required_string)
}
</script>
</html>
Output
Before clicking the Press me button:
After clicking on Press me button:
Using the replace method with global regular expression
The procedure makes use of the replace function for strings. In this method, the target string for replacement is defined as a regular expression with global scope, enabling the search and replacement process within the provided string.
Syntax:
Let's explore the syntax of it and understand its operational behavior.
const givenString;
const toReplace = new RegExp(toReplaceString, 'g');
const replacement;
const required_string = givenStringReplace(toReplace, replacement);
Example
To deepen your understanding of the syntax mentioned above, let's apply it in a practical scenario with an example.
<!DOCTYPE html>
<html>
<body>
<h3>To obtain the final string after replacement, please press the button.</h3>
<input type = "button" onclick = "replace()" value = "Press button">
</body>
<script>
function replace(){
const given_string = "In this string, every e is going to be a large E";
const to_replace = new RegExp('e','g');
const replacement = 'E';
const required_string = given_string.replace(to_replace, replacement);
document.write("Before replacement string was: " + given_string+ "<br>" + "After replacement string is: " + required_string)
}
</script>
</html>
Output
Before clicking the Press me button:
After clicking on Press me button:
Using JavaScript's replaceAll function for Strings:
This technique functions similarly to the replace method, with the key distinction being that replace employs a regular expression, while in this case, we are working solely with a straightforward string. Let's delve into the syntax directly to understand how it operates.
Syntax:
const givenString;
const toReplace;
const replacement;
const requiredString = givenStringReplaceAll(toReplace, replacement);
In the syntax provided, three strings are defined: the initial string provided, the string to be substituted, and the string to be used as a replacement for the initial string.
The provided string was then replaced with every occurrence of the initial string utilizing the replaceAll method.
Example
To deepen our understanding of the syntax mentioned earlier, let's explore it through an example.
<!DOCTYPE html>
<html>
<body>
<h3>To obtain the final string after replacement, please press the button.</h3>
<input type = "button" onclick = "replace()" value = "Press me">
</body>
<script>
function replace(){
const given_string = "In this string, every e is going to be a large E";
const to_replace = 'e';
const replacement = 'E';
const required_string = given_string.replaceAll(to_replace, replacement);
document.write("Before replacement string was: " + given_string+ "<br>"+"After replacement string is: " + required_string);
}
</script>
</html>
Output
Before clicking the Press me button:
After clicking on Press me button:
In summary
In the previous section, we acquired the knowledge to substitute a string in JavaScript wherever it is found. We are now equipped to detect a particular type of substring within a provided string and swap it with a user-defined string.
There are three techniques in JavaScript to replace all instances of a string:
- breaking the string into an array and connecting it back by adding replacement in the gaps
- utilizing the replace function with a global regular expression
- utilizing the replaceAll method of strings