How do you replace a substring in a string in JavaScript?

String manipulation is a common task in programming, and JavaScript provides several built-in methods to work with strings.

One such method is replace(), which allows you to replace substrings or patterns in a string with new values.

Syntax of `replace()` method:

The replace() method in JavaScript has the following syntax:

str.replace(searchValue, replaceValue);

where str is the original string on which you want to perform the replacement, searchValue is the substring or pattern that you want to search for, and replaceValue is the string that you want to replace searchValue with.

Usage:

The replace() method can be used in a variety of ways to replace substrings in a string.

1. Replace the first occurrence of a substring:

You can use the replace() method to replace only the first occurrence of a substring in a string.

Here is an example:

const originalString = "I like apples, and I like bananas.";
const searchString = "apples";
const replacementString = "oranges";

const modifiedString = originalString.replace(searchString, replacementString);

console.log(modifiedString); // Output: "I like oranges, and I like bananas."

In this example, the searchString “apples” is replaced with the replacementString “oranges” in the originalString.

2. Replace all occurrences of a substring using a regular expression:

You can use regular expressions in combination with the replace() method to replace all occurrences of a substring in a string.

Here’s an example:

const originalString = "I like apples, and I like bananas.";
const searchString = /like/g; // Using a regular expression with the "g" flag for global search
const replacementString = "love";

const modifiedString = originalString.replace(searchString, replacementString);

console.log(modifiedString); // Output: "I love apples, and I love bananas."

In this example, the regular expression /like/g is used as the searchValue, where the g flag stands for global search. This means that all occurrences of the substring “like” in the originalString will be replaced with the replacementString “love”.

3. Replace a case-insensitive occurrence of a substring using a regular expression:

You can also use regular expressions with flags to perform case-insensitive replacements.

Here’s an example:

const originalString = "I like Apples, and I like Bananas.";
const searchString = /apples/i; // Using a regular expression with the "i" flag for case-insensitive search
const replacementString = "oranges";

const modifiedString = originalString.replace(searchString, replacementString);

console.log(modifiedString); // Output: "I like oranges, and I like Bananas."

In this example, the regular expression /apples/i is used as the searchValue, where the i flag stands for case-insensitive search. This means that the substring “apples” in the originalString will be replaced with the replacementString “oranges”, regardless of its case.

Notes:

The replace() method does not modify the original string, but instead returns a new string with the replacements made. If you want to modify the original string, you need to assign the result of replace() back to the original variable, as shown in the examples above.

Usage with a callback function:

The replace() method in JavaScript also allows you to pass a callback function as the replaceValue, which gives you more flexibility in performing replacements.

The callback function will be called for each match found in the string, and you can specify the replacement string dynamically based on the match.

Here is an example:

const originalString = "I have 3 apples and 5 bananas.";
const searchString = /\d+/g; // Using a regular expression to match all digits
const replacementFunction = (match) => parseInt(match) * 2; // Callback function to double the matched number

const modifiedString = originalString.replace(
  searchString,
  replacementFunction
);

console.log(modifiedString); // Output: "I have 6 apples and 10 bananas."

In this example, the regular expression /d+/g is used to match all digits in the originalString. The callback function replacementFunction takes the matched number as an argument and returns its double as the replacement string.

The replace() method iterates over all matches found in the string and calls the callback function for each match, replacing it with the return value of the callback function.

Handling special characters:

When using the replace() method with a search string that contains special characters, such as characters with special meanings in regular expressions (e.g., $, ^, .), you need to escape them using a backslash (\).

Here is an example:

const originalString = "I paid $50 for the book.";
const searchString = /\$/g; // Using a regular expression to match the dollar sign
const replacementString = "€"; // Replacing the dollar sign with Euro sign

const modifiedString = originalString.replace(searchString, replacementString);

console.log(modifiedString); // Output: "I paid €50 for the book."

In this example, the search string /\$/g is used to match the dollar sign in the originalString, and the replacement string "€" is used to replace it with the Euro sign.