JavaScript Regex Replace
Introduction to the JavaScript replace() method
The String.prototype.replace() method works with both strings and regular expressions. This tutorial focuses solely on regular expressions.
The following shows the syntax of the replace() method:
replace(regexp, newSubstr)
In this syntax:
- The
regexpis a regular expression to match. - The
newSubstris a string to replace the matches. If thenewSubstris empty, thereplace()method removes the matches.
The replace() returns a new string with the matches replaced by the newSubstr. Note that the replace() method doesn’t change the original string but returns a new string.
By default, the replace() method replaces the first match if the regexp doesn’t use the global flag (g). To replace all matches, you use the global flag (g) in the regexp.
JavaScript regex replace() method examples
Let’s take some examples of using the replace() method.
1) A simple the JavaScript regex replace() method example
The following example uses the replace() method to replace the first match of the JS string with the JavaScript string:
const s = 'JS and js';
const re = /js/i;const newS = s.replace(re, 'JavaScript');
console.log(newS);
Code language: JavaScript (javascript)
Output:
JavaScript and js
The /js/i matches both JS and js in the 'JS and js' string. However, the replace() method replaces only the first match (JS).
To replace all matches, you use the global flag (g) in the regular expression.
2) Using the JavaScript regex replace() method with the global flag
The following example uses the replace() method with a regular expression containing a global flag (g) to replace all matches:
const s = 'JS and js';
const re = /js/gi;const newS = s.replace(re, 'JavaScript');
console.log(newS);
Code language: JavaScript (javascript)
Output:
JavaScript and JavaScript
3) Using the JavaScript regex replace() method with capturing groups
When a regular expression contains the capturing groups, you can reference these groups in the newSubstr using the $N syntax where N is the grouping number. For example, $1 and $2 reference first and second capturing groups.
The following example illustrates how to use the replace() method with capturing groups to swap the first and last names in a person name:
let re = /(\w+)\s(\w+)/;
let name = 'Jane Doe';
let lastFirst = name.replace(re, '$2, $1');console.log(lastFirst);
Code language: JavaScript (javascript)
Output:
Doe, Jane
How it works.
The regular expression /(\w+)\s(\w+)/ matches one or more word characters, a space, and then one or more word characters. In other words, it matches any string that has a word, space, and another word.
The regular expression contains two capturing groups. The first capturing group captures the first word and the second one captures the second word after the space.
In the newSubstr, we use $1 to reference the first capturing group and $2 to reference the second one. To swap the first name and last name, we place the second match ($2) first and then the first match ($1).
JavaScript regex replace() method with replacer function
The second argument of the replace() method can be a function like this:
replace(regexp, replacerFunction)
The replace() method calls the replacerFunction after it finds the first match. The replacerFunction is used to create a substring to replace the match.
If the regexp uses the global flag (g), the replace() method will call the replacerFunction after every match.
The replacerFunction has the following arguments:
matchspecifies the matched substring.p1,p2, … the values of the capturing groups in the regexp.offsetis an integer that specifies the offset of the matched substring within the input string.stringis the input string.groupsis an object whose are are the named capturing group and values are matched values.
Let’s take an example of using the replace() method with a replacer function.
Suppose you have a string like this:
backgroundColor
And you want to transform it into something like:
background-color
To do that you can use the replace() method with a replacer function.
First, construct a regular expression that matches a capital letter:
/[A-Z]/g
Second, define a replacer function:
function replacer(match, offset) {
return (offset > 0 ? '-' : '') + match.toLowerCase();
}Code language: JavaScript (javascript)
The replacer() function adds a hyphen if the matched letter is not at the beginning of the string and concatenates the hyphen with the matched letter converted to lowercase.
Third, use the replace() method to replace the match with the substring returned from the replacer() function:
function addHyphen(prop) {
return prop.replace(/[A-Z]/g, replacer);
}Code language: JavaScript (javascript)
The following shows the complete code:
function replacer(match, offset) {
return (offset > 0 ? '-' : '') + match.toLowerCase();
}function addHyphen(prop) {
return prop.replace(/[A-Z]/g, replacer);
}
const prop = 'backgroundColor';
console.log(addHyphen(prop));
Code language: JavaScript (javascript)
Output:
background-color
To make the code more concise, you can use arrow functions with the replacer function as a callback function like this:
const addHyphen = (prop) =>
prop.replace(
/[A-Z]/g,
(match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase()
);const prop = 'backgroundColor';
console.log(addHyphen(prop));
Code language: JavaScript (javascript)
Summary
- Use the
replace()method to find matches against a regular expression and replace the matches with a new substring.