Replace Occurrences of a String in JavaScript
Tags: javascript, webdev, programming, tutorial
Published: 2021-11-13 16:24:39

There are a couple of ways to replace the occurrence of a substring in JavaScript.

In this article, you will learn how to replace the occurrence of a string with the built-in `replace`, and `replaceAll` methods provided by the `String` type and how to use them. 

They allow you to replace the occurrences of a substring in a string and return the new version of the string.

Note that both methods don’t change the original string, but return the new string with the specified substrings replaced with a new value. Let's see how.

## Using `String.replace`

The `replace` method accepts two arguments:

- `pattern` — A string to search for, it could be a string or a regex pattern.
- `replacement` — The text to replace the `pattern` with.

And replaces a substring in a string with a new one and returns the new string.

Syntax:

```js
const newString = oldString.replace(pattern, replacement);
```

Let's take a look at an example:

```js
const quote = 'Voldamot is the greatest Wizard. Voldemort will rule the world!';

const newQuote = quote.replace('Voldamot','Harry Potter')
//outputs: Harry Potter is the greatest Wizard. Voldamot will rule the world!
```

Here, only the first occurrence of the substring `Voldamot` was replaced with the new substring `Harry Potter`.

To use the `replace` method to replace all occurrences of a substring in a string with a new one, you must use a [regular expression](https://link).

### Using regular expressions

```js
const newString = oldString.replace(regex, replacement);
```

Here, the `replace` method accepts a regular expression as the `searchValue`. it then replaces them with the `newSubstr`, and returns a new string.

```js
const quote = 'Voldamot is the greatest Wizard. Voldemort will rule the world!';

const newQuote = quote.replace(/Voldamot/g,'Harry Potter')
//outputs: Harry Potter is the greatest Wizard. Harry Potter will rule the world!
```

By passing the global flag `(g)` to the regex pattern, it tells the `replace` method to search for all occurrences of `Voldamot` in the string, and replace them with `Harry Potter`.

## Using `String.replaceAll`

Trying to replace all occurrences of a substring with the `replace` method can be quite a workaround. The `String` type provides a method that is more straightforward in achieving this, `replaceAll`.

```js
const newString = oldString.replaceAll(pattern, replacement);
```

Introduced in ES2021, the `replaceAll` method is a sequel to the [String.replace](https://link). The `replaceAll` method returns a new string in which all occurrences of  `pattern` are replaced by the `replacement` passed to it.

Example:

```js
const str = "David is a self-taught developer. David will rule the world!";

let newStr = str.replaceAll("David","Victor")
//output: Victor is a self-taught developer. Victor will rule the world!.
```

No need for regular expressions here, making the process seamless.

## Wrapping Up

And that’s it. The `String` type provides two methods to replace occurrences of a string:

- `replace()`: only replaces the first occurrence of the substring with replacement, also accepts regular expressions, and uses the `g` flag to replace all occurrences of the substring with a new one.
- `replaceAll()`: replaces all occurrences of the substring, method is more straightforward.

And you’re good to go! thanks for reading and, happy coding!.

[]()
<a href="https://www.buymeacoffee.com/molipa">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy me a Coffee ☕ &emoji=🍦&slug=molipa&button_colour=40DCA5&font_colour=ffffff&font_family=Comic&outline_colour=000000&coffee_colour=FFDD00"></a>