DEV Community

loading...
Cover image for replaceAll in JavaScript

replaceAll in JavaScript

suprabhasupi profile image Suprabha ใƒป2 min read

String.prototype.replaceAll() replaces all occurrence of a string with another string value.

Syntax:

const newStr = str.replaceAll(regexp|substr, newSubstr|function)
Enter fullscreen mode Exit fullscreen mode

There are few ways to replace all occurrence of a string:

  1. RegEx
  2. split and join
  3. 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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Reference ๐Ÿง

๐ŸŒŸ Twitter ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Suprabha.me ๐ŸŒŸ Instagram

Discussion (4)

pic
Editor guide
Collapse
shaileshcodes profile image
Shailesh Vasandani

Awesome post! I'm more familiar with replaceAll coming from Java, and I didn't know that replace could do the same thing using the global regex tag.

Thanks so much for sharing!

Collapse
bias profile image
Tobias Nickel

i am so happy about this new api. before i always did the second.

Collapse
jadenconcord profile image
Jaden Concord

I've always just used the RexExp function and didn't know about replaceAll, good to know

Collapse
maulik profile image
Maulik

Because replaceAll is bit new. As of August 2020, greenfield browsers have support for the String.replaceAll() method defined by the ECMAScript 2021 language specification. For older/legacy browser we need to either use the regex or split-join (or can use shim/polyfil or babel parser)

Also node v15 supports replaceall but in older versions we can't use it