String.prototype.replaceAll() replaces all occurrence of a string with another string value.
Syntax:
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
There are few ways to replace all occurrence of a string:
- RegEx
- split and join
- replaceAll
1. RegEx ๐ โโ๏ธ
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replace(/suprabha/g, "suprabha supi");
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
2. split and join ไท โ
Using split and join, replace all the occurrence of a string.
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.split('suprabha').join('suprabhasupi');
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
Till now, you were able to do full replacement with above two approaches. Now we have replaceAll which helps us to do the same.
3. replaceAll ๐
The Mathias bynens proposal solves these problems and gives a very easy way to do substring replacement using `replaceAll()` which replaces all instances of a substring in a string with another string value without using a global regexp.
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replaceAll('suprabha','suprabhasupi');
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
You can also pass RegEx to first parameter in replaceAll.
const info = "Hi All, suprabha's account is @suprabha";
const regex = /suprabha/ig;
const newInfo = info.replaceAll(regex,'suprabhasupi');
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabhasupi"
Note: ๐งจ
When using a regexp you have to set the global ("g") flag; otherwise, it will throw a TypeError: "replaceAll must be called with a global RegExp".
You also have replace() method, which replaces only the first occurrence if the input pattern is a string.
const info = "Hi All, suprabha's account is @suprabha";
const newInfo = info.replace("suprabha", "suprabhasupi");
console.log(newInfo); // "Hi All, suprabhasupi's account is @suprabha"
Reference ๐ง
| ๐ Twitter | ๐ฉ๐ปโ๐ป Suprabha.me | ๐ Instagram |
Top comments (4)
Awesome post! I'm more familiar with
replaceAllcoming from Java, and I didn't know thatreplacecould do the same thing using the global regex tag.Thanks so much for sharing!
i am so happy about this new api. before i always did the second.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.