The String replace() method
Find out all about the JavaScript replace() method of a string
Finds the first occurrence of str1
in the current string and replaces it with str2
.
Returns a new string without mutating the original one.
'JavaScript'.replace('Java', 'Type') //'TypeScript'
You can pass a regular expression as the first argument:
'JavaScript'.replace(/Java/, 'Type') //'TypeScript'
replace()
will only replace the first occurrence, unless you use a regex as the search string, and you specify the global (/g
) option:
'JavaScript JavaX'.replace(/Java/g, 'Type') //'TypeScript TypeX'
The second parameter can be a function. This function will be invoked when the match is found (or for every match foundm if using a global regex /g
), with a number of arguments:
- the string that matches the pattern
- an integer that specifies the position within the string where the match occurred
- the string
The return value of the function will replace the matched part of the string.
Example:
'JavaScript'.replace(/Java/, (match, index, originalString) => {
console.log(match, index, originalString)
return 'Test'
}) //TestScript
This also works for regular strings, not just regexes:
'JavaScript'.replace('Java', (match, index, originalString) => {
console.log(match, index, originalString)
return 'Test'
}) //TestScript
In case your regex has capturing groups, those values will be passed as arguments right after the match parameter:
'2015-01-02'.replace(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/, (match, year, month, day, index, originalString) => {
console.log(match, year, month, day, index, originalString)
return 'Test'
}) //Test
→ I wrote 17 books to help you become a better developer:
- C Handbook
- Command Line Handbook
- CSS Handbook
- Express Handbook
- Git Cheat Sheet
- Go Handbook
- HTML Handbook
- JS Handbook
- Laravel Handbook
- Next.js Handbook
- Node.js Handbook
- PHP Handbook
- Python Handbook
- React Handbook
- SQL Handbook
- Svelte Handbook
- Swift Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025