JavaScript : How to replace string

The replace method in JavaScript is a very useful feature for string manipulation, allowing for the replacement of a specific pattern within a string with a new pattern.

Details of the replace method

Basic syntax of the replace method

The basic syntax of the replace method is as follows.

1str.replace(regexp|substr, newSubStr|function)

• regexp|substr
  • Specifies the pattern (regular expression or string) to replace.
• newSubStr|function
  • Specifies the new substring or a function to perform the replacement.

About the arguments of the replace method

By specifying a function as the second argument of the replace method, more advanced replacements can be made. This function dynamically generates a new string based on the matched result.

1let str = "It is 15 degrees outside.";
2str = str.replace(/\d+/, (match) => parseInt(match) * 1.8 + 32);
3console.log(str); // "It is 59 degrees outside."

Regular expressions and the replace method

Basic ways to use replace with regular expressions

The replace method can be used in combination with regular expressions to perform more complex replacements.

1let str = "I love cats, I love dogs.";
2str = str.replace(/dogs|cats/g, "animals");
3console.log(str); // "I love animals, I love animals."

In this example, we are using the regular expression /dogs|cats/g to replace all instances of “dogs” or “cats” with “animals”.

Applied examples of using replace with regular expressions

By combining the replace method with regular expressions, it's possible to capture and manipulate specific patterns in strings. Here is an example.

1let str = "I have 3 cats and 4 dogs.";
2str = str.replace(/(\d+) (cats|dogs)/g, (match, p1, p2) => `${p1} ${p2 === 'cats' ? 'kittens' : 'puppies'}`);
3console.log(str); // "I have 3 kittens and 4 puppies."

In this example, we are replacing combinations of a number and “cats” or “dogs” with a number and “kittens” or “puppies”.

How to replace all instances within a string

How to replace all instances with the replace method

By default, the replace method only replaces the first matched instance. However, by using the g flag (global search) of the regular expression, it's possible to replace all matched instances.

1let str = "Ilove cats, I love cats, I love cats.";
2str = str.replace(/cats/g, "dogs");
3console.log(str); // "I love dogs, I love dogs, I love dogs."

How to use the replaceAll method

To replace all instances, you can also use the replaceAll method. This method replaces all instances within a string.

1let str = "I love cats, I love cats, I love cats.";
2str = str.replaceAll("cats", "dogs");
3console.log(str); // "I love dogs, I love dogs, I love dogs."

Summary and next steps

The importance and utilization of the replace method

The replace method in JavaScript is a very powerful tool in string manipulation. It can be used in a variety of cases, from simple string replacement to complex replacements using regular expressions.

The next steps in string manipulation in JavaScript

Mastering the replace method will make string manipulation in JavaScript more flexible and powerful. For the next steps, I recommend learning other string manipulation methods (such as substring, split, concat, etc.) and challenging more advanced operations using the replace method.