JavaScript replaceAll replaces every occurrence of matching text and returns a new string. It does not modify the original string, so you must store or use the returned value.
Use replaceAll in JavaScript with a literal string when the text is known, or with a global regular expression when matching needs flags or pattern logic.
How JavaScript replaceAll Replaces Every Literal Match
Pass a string as the first argument to search for literal text. Regular-expression characters in that argument, such as + or ., have no special meaning.
Example: const source = “red, red, blue”;
const updated = source.replaceAll(“red”, “green”);
console.log(updated); // “green, green, blue”
console.log(source); // “red, red, blue”
The returned value contains every replacement, while source remains unchanged. Literal matching is case-sensitive, so searching for “red” does not replace “Red”. A replacement can be a fixed string or a function that calculates the result for each match.
How Does JS replaceAll Differ from replace?
JS replaceAll replaces every literal match by default. The replace() method replaces only the first literal match when its search value is a string.
Example: const source = “red, red, blue”;
source.replace(“red”, “green”); // “green, red, blue”
source.replaceAll(“red”, “green”); // “green, green, blue”
With a regular expression, replace() replaces every match only when the expression has the global g flag:
source.replace(/red/g, “green”); // “green, green, blue”
Use replaceAll() for clear literal replacement. Use replace() when you intentionally need only the first match, or when existing code already handles a regular-expression pattern.
How to Use replaceAll() in JavaScript with a Global Regex
A regular expression passed to replaceAll() must be global. The expression must include the g flag, or JavaScript throws a TypeError instead of performing a partial replacement.
Example: const text = “Red red RED”;
const result = text.replaceAll(/red/gi, “blue”);
// “blue blue blue”
The i flag makes the pattern case-insensitive, while g makes it apply to every match. A non-global expression such as /red/i is not valid for replaceAll().
For dynamic text that should be treated literally, pass the value directly as a string:
const term = “red+blue”;
text.replaceAll(term, “color”);
If a dynamic value must be included in a larger regular expression, escape its pattern characters before constructing the expression:
function escapeRegExp(value) {
return value.replace(/[.*+?^${}()|[\]\\]/g, “\\$&”);
}
const pattern = new RegExp(escapeRegExp(term), “g”);
text.replaceAll(pattern, “color”);
This keeps characters from the user-provided value from changing the regex’s meaning and preserves the required global behavior.
How Do Callbacks and Special Replacement Tokens Work?
Pass a function as the replacement to calculate a different result for each match. The callback receives the complete match first, followed by captured groups and other match details.
Example: const prices = “Item: $5, Item: $12”;
const raised = prices.replaceAll(/\$(\d+)/g, (match, amount) => “$” + (Number(amount) + 1));
// “Item: $6, Item: $13”
When the replacement is a string, JavaScript recognizes special replacement tokens. $& inserts the complete match, $1 inserts the first captured group, $2 inserts the second, $` inserts the text before the match, $’ inserts the text after the match, and $$ inserts a literal dollar sign.
Example: const marked = “red blue”.replaceAll(/(\w+)/g, “[$&]”);
// “[red] [blue]”
These tokens are interpreted when the replacement is a string, including when the search value is a literal string. A callback’s returned value is inserted as-is, so dollar signs returned by the function are not treated as replacement tokens.