How to Replace Substring in Javascript

3 min readAug 23, 2023

In Javascript, you can use the replace() method to replace the string. This method allows to pass two parameters in it. The first parameter is the string that you want to replace, on the other hand, the second parameter will be the new substring on the replacement of the first string parameter.

Replace method allows you to replace occurrences of a specific substring with a new substring. This method is generally helpful when you are transforming content.

Knowing how to use the replace() function in JavaScript is useful because it allows you to easily manipulate and work with strings. Here’s how you can do it:

How to use Replace() method:

Replace a Single Occurrence:

In the example below, the replace() method replaces all occurrences of the substringToReplace (“Hello”) in the originalString with the newSubstring (“Hi”), resulting in the updatedString.


const originalString = "Hello, world! Hello!";
const substringToReplace = "Hello";
const newSubstring = "Hi";

const updatedString = originalString.replace(substringToReplace, newSubstring);

console.log(updatedString); // Output: "Hi, world! Hi!"

Replace All Occurrences using Regular Expression:

If you want to replace all occurrences of the substring globally, you can use a regular expression with the /g flag:


const originalString = "Hello, world Hello.";
const substringToReplace = /Hello/g;
const newSubstring = "Hi";

const updatedString = originalString.replace(substringToReplace, newSubstring);

console.log(updatedString); // Output: "Hi, world Hi."

Learn more: [11] Helpful Functions in Javascript that You Need to Know

Replacing Case-Insensitive Occurrences:

The above one is case-sensitive, so if you want irrespective of the letter case then use /gi flag:


const originalString = "HeLLo, WoRLd HeLLo";
const substringToReplace = /hello/gi;
const newSubstring = "Hi";

const updatedString = originalString.replace(substringToReplace, newSubstring);

console.log(updatedString); // Output: "Hi, WoRLd Hi."

Using a Function as the Replacement:


const originalString = "The year is 2021. The year is 2022.";
const yearPattern = /20\d{2}/g;

function replaceWithNextYear(match) {
  const year = parseInt(match);
  return (year + 1).toString();
}

const updatedString = originalString.replace(yearPattern, replaceWithNextYear);

console.log(updatedString); // Output: "The year is 2022. The year is 2023."

Replacing with Different Substrings:


const originalString = "Apples, oranges, and bananas.";
const fruits = {
  Apples: "Pears",
  oranges: "grapes",
  bananas: "cherries"
};

const updatedString = originalString.replace(/Apples|oranges|bananas/gi, matched => fruits[matched]);

console.log(updatedString); // Output: "Pears, grapes, and cherries."

🗒️ Note: Remember that the replace() method returns a new string with the replacements made. It doesn’t modify the original string.

So, that’s all about replace substring in javascript. I hope you enjoyed the article and if you found this useful, then please share it with your friends and colleagues.

If you have any queries please feel free to post them in the comments section or anything that you wanted to ask through mail contact.

Happy Coding!