# How to replace all occurrences of a string in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 2, 2019, updated Oct 4, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/string-replace-javascript

> Learn how to use the replace() and replaceAll() methods to replace all occurrences of a string in a text using JavaScript. 

To replace all occurrences of a string in a text with the new one, use the `replace()` or `replaceAll()` method. Both these JavaScript methods do not change the original string. Instead, return a new string with the substrings replaced by a new substring.

Alternatively, you could also use both `split()` and `join()` methods together to replace all instances of a string in a given text.

## `replace()` Method 

The [`replace()`](https://attacomsian.com/blog/javascript-string-replace) method can be used in combination with a [regular expression](https://attacomsian.com/blog/javascript-regular-expressions) to find and replace all occurrences of a word or substring inside any string. 

This method searches a string for the specified value, or a regular expression, and returns a new string where the specified values are replaced:

```javascript
const str = 'JavaScript is JavaScript!'

const updated = str.replace('JavaScript', 'Java')

console.log(updated)
//"Java is JavaScript!"
```

As you can see above, the `replace()` method only replaces the first occurrence of the `JavaScript` in the string. 

To replace all occurrences (case-sensitive) of the given value, you need to use a regular expression with [global modifier](https://attacomsian.com/blog/javascript-regular-expressions#regular-expression-modifiers) (the `g` flag).

```javascript
const str = 'JavaScript is JavaScript!'

const updated = str.replace(/JavaScript/g, 'Java')

console.log(updated)
//"Java is Java!"
```

For a global case-insensitive replacement, you need to pass the `i` flag in addition to the `g` flag, as shown below:

```javascript
const str = 'JavaScript is JavaScript!'

const updated = str.replace(/javascript/gi, 'Java')

console.log(updated)
//"Java is Java!"
```

## `replaceAll()` Method

The `replaceAll()` method replaces all occurrences of a substring in a string and returns the new string:

```javascript
const str = 'JavaScript is JavaScript!'

const updated = str.replaceAll('JavaScript', 'Java')

console.log(updated)
//"Java is Java!"
```

The `replaceAll()` method also accepts a regular expression as a pattern. For a case-insensitive pattern matching, use a regular expression with the `gi` flags:

```javascript
const str = 'JavaScript is JavaScript!'

const updated = str.replaceAll(/javascript/gi, 'Java')

console.log(updated)
//"Java is Java!"
```

Note that the `replaceAll()` method only works in modern browsers and is not supported by all browsers. Therefore, make sure that you check the [browser compatibility](https://caniuse.com/mdn-javascript_builtins_string_replaceall) before using it. 

## `split()` and `join()` Methods

Another way to replace all instances of a string is using two JavaScript methods: `split()` and `join()`. 

The [`split()`](https://attacomsian.com/blog/javascript-string-split) method splits the string into an array of substrings based on a specified value (case-sensitive) and returns the array. 

If an empty string is used as the separator, the string is split between each character. This method does not alter the original string.

```javascript
const str = 'JavaScript is JavaScript!'

const token = str.split('JavaScript')

console.log(token)
// ["", " is ", "!"]
```

If you want to perform a global case-insensitive split, use a regular expression instead:

```javascript
const token = str.split(/javascript/gi)
```

The `join()` method does the opposite of the `split()` method. It joins the elements of an array into a string and returns the string. We can specify a join separator. The default separator is the comma.

```javascript
const str = 'JavaScript is JavaScript!'

const token = str.split('JavaScript')

const updated = token.join('Java')

console.log(updated)
// Java is Java!
```

Both split and join operations can be combined as shown below:

```javascript
const str = 'JavaScript is JavaScript!'

const updated = str.split('JavaScript').join('Java')

console.log(updated)
// Java is Java!
```