How To Replace Multiple Characters In A String Using JavaScript

This article will teach you how to replace multiple characters in a string using JavaScript. I will guide you through the three most accessible ways, which are using the String.replace() method, using the String.replaceAll() method, and using split() and join() methods.

Replace multiple characters in a string using JavaScript

Using String.replace() method

The String.replace() method is a method in JavaScript. It has the function of finding a substring or a regular expression in the String and then replacing it with a value provided by the user. This method will return the replaced string without changing the original string.

By default, the replace() method will only replace the first string found. Thus, if a string occurs more than once in the original string, only the first occurrence of that string is replaced.

For example:

I want to replace the characters “?” and “*” with space (” “)

let myString = "This?paragraph*has?some?incorrect*punctuation";
let newString = myString.replace("?", " ").replace("*", " ");

console.log(myString);
console.log("After being replaced:");
console.log(newString);

Output:

This?paragraph*has?some?incorrect*punctuation
After being replaced:
This paragraph has?some?incorrect*punctuation

Through the above example, we see that there are many ? and * appears in the paragraph but only the first ? and * is replaced.

So to use the String.replace() method to replace multiple characters in a string using JavaScript, we need to use the String.replace() method in combination with the global modifier (g). By using ‘/ /g’, all values that match the value you provide will be completely replaced.

For example:

I want to replace the characters “?” and “*” with space (” “)

let myString = "This?paragraph*has?some?incorrect*punctuation";
let newString = myString.replace(/[?*]/g, " ");

console.log(myString);
console.log("After being replaced:");
console.log(newString);

Output:

This?paragraph*has?some?incorrect*punctuation
After being replaced:
This paragraph has some incorrect punctuation

Using String.replaceAll() method

The String.replaceAll() method in JavaScript replaces all strings or regular expressions that match the specified value. This method will return a new string and not change the original string.

This method is different from replace() method in that it will replace whole strings without needing to be used in conjunction with the global modifier (g).

For example:

I want to replace the characters “?” and “*” with space (” “)

let myString = "This?paragraph*has?some?incorrect*punctuation";
let newString = myString.replaceAll("?", " ").replaceAll("*", " ");

console.log(myString);
console.log("After being replaced:");
console.log(newString);

Output:

This?paragraph*has?some?incorrect*punctuation

After being replaced:
This paragraph has some incorrect punctuation

Using split() and join() Methods

The split() and join() methods are used to split and merge strings in JavaScript.

To replace multiple characters in a string, first, we use the split() method with the character to be replaced as the delimiter, the split() method will now split the original string into an array. The replacement characters treated as delimiters will be removed from the array. Second, we utilize the join() method with the separator character as the character we want to replace in the string; then, the join() method will concatenate the array into a new string with the characters that have been replaced.

For example:

I want to replace the characters “?” and “*” with space (” “)

let myString = "This?paragraph*has?some?incorrect*punctuation";
let newString = myString.split("?").join(" ").split("*").join(" ");

console.log(myString);
console.log("After being replaced:");
console.log(newString);

Output:

This?paragraph*has?some?incorrect*punctuation
After being replaced:
This paragraph has some incorrect punctuation

Summary

I showed you three ways to replace multiple characters in a string using JavaScript in this article. These two methods, String.replaceAll() and String.replace(), are easily accessible and widely used by many people. You can use those two ways in your project. Hope to see you again in the next post.

Mary Ralston

Hi, I’m Mary Ralston. I have experience programming in HTML, javascript, C++,… and I want to share with you my experience. So if you want to know more about the above languages read my articles