JavaScript replace multiple characters using single replace call

JavaScript program to replace multiple characters of a string with one replace call:

This is a frequently faced problem in development. You need to replace multiple occurrences of a character in a string with one replace call. You can iterate over the string characters and replace the characters one by one. But, JavaScript provides an easy way to do that.

In this post, we will learn how to replace multiple characters with one single replace call and how replace and replaceAll functions work.

replace() function:

The inbuilt replace function takes two parameters:

replace(old, new)

It replaces the old value with the new value and returns the modified string. We can pass a character or a string to replace. But, it will replace only the first occurrence of old.

For example,

givenStr = 'Hello@World@';

newStr = givenStr.replace('@', ' ');

console.log(newStr);

In this example, we are using the replace function to replace @ with a blank space in the string givenStr. The new returned string is assigned to the newStr variable.

If you run this program, it will print:

Hello World@

You can see that only the first occurrence of @ is replaced.

To replace all the occurrences of @, we have to use a chain of replace function call.

givenStr = 'Hello@World@!!@';

newStr = givenStr.replace('@', ' ').replace('@', ' ').replace('@', ' ');

console.log(newStr);

It will replace all the occurrences of @.

Hello World !!

Example 2: By using a regular expression with replace():

We can pass a regular expression to match all occurrences of a character. For example, if we pass @\g as the first argument to replace(), it will match all occurrences of @ in the string.

givenStr = 'Hello@World@!!@';

newStr = givenStr.replace(/@/g, ' ');

console.log(newStr);

It will print:

Hello World !!

Regular expression to match different characters:

This method has other advantages. If we want to replace different types of characters, we can put them in a square bracket. You can build any type of regex pattern.

For example, /[@#&]/g will match all occurrences of @, # and & in the string.

givenStr = 'Hello@World&!!#';

newStr = givenStr.replace(/[@#&]/g, ' ');

console.log(newStr);

It will print:

Hello World !!

Regular expression with pipe character:

The pipe character, | represents OR in a regular expression. We can also use it in a regex pattern to match all occurrences of characters:

givenStr = 'Hello@World&!!#';

newStr = givenStr.replace(/@|#|&/g, ' ');

console.log(newStr);

This will print the same output:

Hello world !!

replaceAll() function to replace all occurrences of a character:

The replaceAll function replaces all matches of a character in a string. The syntax of this function is similar to the replace function:

replaceAll(old, new)

It returns one new string. So, if you want to replace the occurrences of different characters, you can use chain function call.

givenStr = "Hello@World&!!#";

newStr = givenStr
  .replaceAll("@", " ")
  .replaceAll("&", " ")
  .replaceAll("#", " ");

console.log(newStr);

It will print:

Hello World !!

If you pass a regex, it will work similarly to replace. For example, the following program will print the same output:

givenStr = "Hello@World&!!#";

newStr = givenStr.replaceAll(/@|#|&/g, " ");

console.log(newStr);

CodeVsColor

JavaScript replace multiple characters using single replace call

JavaScript program to replace multiple characters of a string with one replace call:

replace() function:

Example 2: By using a regular expression with replace():

Regular expression to match different characters:

Regular expression with pipe character:

replaceAll() function to replace all occurrences of a character:

You might also like: