How to Replace a Substring in a String in JavaScript

Introduction

Replacing a substring within a string is a common task in JavaScript. The most straightforward way to achieve this is by using the replace() method, which allows you to replace a part of a string with another substring. You can also use regular expressions to replace multiple occurrences of a substring.

Problem Statement

Create a JavaScript program that:

• Accepts a string and a substring to be replaced.
• Replaces the first occurrence of the substring or all occurrences if needed.
• Returns and displays the modified string.

Example:

• Input: "Hello world", Replace "world" with "JavaScript"

• Output: "Hello JavaScript"

• Input: "This is JavaScript. JavaScript is fun.", Replace "JavaScript" with "Python"

• Output: "This is Python. Python is fun."

Solution Steps

1. Read the Input String: Provide the original string, the substring to be replaced, and the new substring.
2. Use the replace() Method: Use replace() to replace the first occurrence of the substring, or use a regular expression for global replacement.
3. Display the Result: Print the modified string.

JavaScript Program

Example 1: Replace the First Occurrence

// JavaScript Program to Replace a Substring in a String
// Author: https://www.javaguides.net/

function replaceSubstring(str, oldSubstring, newSubstring) {
    // Step 1: Replace the first occurrence of the substring
    return str.replace(oldSubstring, newSubstring);
}

// Example input
let originalString = "Hello world";
let modifiedString = replaceSubstring(originalString, "world", "JavaScript");
console.log(`Modified String: "${modifiedString}"`);

Output

Modified String: "Hello JavaScript"

Example 2: Replace All Occurrences Using Regular Expressions

// JavaScript Program to Replace All Occurrences of a Substring
// Author: https://www.javaguides.net/

function replaceAllOccurrences(str, oldSubstring, newSubstring) {
    // Step 1: Use a regular expression with the global flag to replace all occurrences
    let regex = new RegExp(oldSubstring, 'g');
    return str.replace(regex, newSubstring);
}

// Example input
let originalString = "This is JavaScript. JavaScript is fun.";
let modifiedString = replaceAllOccurrences(originalString, "JavaScript", "Python");
console.log(`Modified String: "${modifiedString}"`);

Output

Modified String: "This is Python. Python is fun."

Explanation

Step 1: Replace the Substring

• The replace() method is used to replace a substring in a string. By default, it replaces only the first occurrence of the substring.
• If you want to replace all occurrences, you can use a regular expression with the global flag (/g), as shown in the second example.

Step 2: Replace All Occurrences

• To replace every occurrence of the substring in the string, the RegExp constructor is used with the global flag (g), ensuring that every match is replaced.

Step 3: Display the Result

• The modified string is returned by the function and printed using console.log().

Conclusion

This JavaScript program demonstrates how to replace a substring in a string using the replace() method. You can replace only the first occurrence or all occurrences by using regular expressions with the global flag. This method is versatile and can handle various text manipulation tasks in JavaScript applications.