Difference Between String.prototype.replace() and String.prototype.replaceAll() in JavaScript
The String.prototype.replace and String.prototype.replaceAll are frequently used to the modify strings. Understanding the differences between these methods is crucial for the effective string handling. This article explores the characteristics, applications and examples of both the replace and replaceAll methods.
These are the following topics that we are going to discuss:
Table of Content
What is String.prototype.replace()?
The String.prototype.replace() is a method that returns a new string with the some or all matches of a pattern replaced by a replacement. The pattern can be a string or a regular expression and replacement can be a string or function to be called for the each match.
Characteristics:
- The Replaces the first match found if the pattern is a string.
- Can replace all matches if the pattern is a global regular expression.
- Supports replacement with the string or a function.
Applications:
- Useful for the single or first occurrence replacements.
- Can perform complex replacements using the regular expressions and replacement functions.
Example: This example shows the use of String.prototype.replace() method.
let str = "Hello World! Hello Universe!";
let newStr = str.replace("Hello", "Hi");
console.log(newStr);
let regexStr = str.replace(/Hello/g, "Hi");
console.log(regexStr);
let funcStr = str.replace(/Hello/g, (match) => {
return match.toUpperCase();
});
console.log(funcStr);
Output
Hi World! Hello Universe! Hi World! Hi Universe! HELLO World! HELLO Universe!
What is String.prototype.replaceAll()?
The String.prototype.replaceAll() is a method that returns a new string with the all matches of a pattern replaced by the replacement. The pattern must be a string or a regular expression with the global (g) flag.
Characteristics:
- The Replaces all matches found in the string.
- The Requires the pattern to be a string or a global regular expression.
- The Simplifies replacing multiple occurrences without the needing the global flag.
Applications:
- Ideal for the replacing all instances of the substring or pattern.
- Streamlines code for the replacing all occurrences without needing a loop or global flag.
Example: This example shows the use of String.prototype.replaceAll()) method.
let str = "Hello World! Hello Universe!";
let newStr = str.replaceAll("Hello", "Hi");
console.log(newStr);
let regexStr = str.replaceAll(/Hello/g, "Hi");
console.log(regexStr);
let funcStr = str.replaceAll(/Hello/g, (match) => {
return match.toUpperCase();
});
console.log(funcStr);
Output
Hi World! Hi Universe! Hi World! Hi Universe! HELLO World! HELLO Universe!
Difference Between String.prototype.replace and String.prototype.replaceAll
Characteristics | String.prototype.replace | String.prototype.replaceAll |
---|---|---|
Replaces | First match | All matches |
Pattern | The String or regular expression | The String or global regular expression |
Replacement | String or function | String or function |
Global Replacement | Requires global flag with the regex | Implicitly global |
Simplicity for All Matches | Less intuitive without global flag | The Direct and simple |
Introduced in ECMAScript | ES1 (1997) | ES2021 |
Conclusion
Both String.prototype.replace and String.prototype.replaceAll are powerful tools for the string manipulation in JavaScript. The replace is versatile for the various replacement needs while replaceAll offers a straightforward approach for the replacing all instances of a pattern. Understanding when and how to use these methods will enhance the ability to the handle string operations effectively.