Replace all occurrences of a String in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 5, 2022

banner

Photo from Unsplash

Replace all occurrences of a String in TypeScript #

Use the replaceAll() method to replace all occurrences of a string in TypeScript, e.g. str.replaceAll('old', 'new'). The replaceAll() method returns a new string where all occurrences of the specified substring are replaced with the provided replacement.

index.ts
const str = 'apple banana apple'; const result = str.replaceAll('apple', 'kiwi'); console.log(result); // 👉️ "kiwi banana kiwi"

You might get the following error when using the replaceAll() method in TypeScript.

index.ts
const str = 'apple banana apple'; // ⛔️ Error: Property 'replaceAll' does not exist on // type '"apple banana apple"'. Do you need // to change your target library? Try changing // the 'lib' compiler option to 'es2021' or later.ts(2550) const result = str.replaceAll('apple', 'kiwi');

If you do get the "Property 'replaceAll' does ont exist on type" error, open your tsconfig.json file and add ES2021.String to your lib array.

tsconfig.json
{ "compilerOptions": { // ... other options "lib": [ // ... other libs "ES2021.String" ] } }

This will resolve the error and you will be able to use the replaceAll() method.

The 2 parameters we pass to the String.replaceAll method are:

  1. The string to be replaced
  2. The replacement string

If you have to replace all occurrences of a case insensitive string, you can pass a regular expression to the replaceAll method and use it just like we used the replace method.

index.ts
const str = 'APPLE banana apple'; const result = str.replaceAll(/apple/gi, 'kiwi'); console.log(result); // 👉️ "kiwi banana kiwi"

We pass the following 2 parameters to the String.replace method:

  1. A regular expression to match. Notice that we use the g (global) flag to specify that we want to match all occurrences and not just the first one
  2. A replacement string

The i flag enables case-insensitive search. For a complete list of regex flags, check out this table in the MDN docs.

The replaceAll method does not change the original string, instead it returns a new string with the matches replaced. Strings are immutable in JavaScript (and TypeScript).

Alternatively, you can use the replace method.

To replace all occurrences of a string in TypeScript, use the replace() method, passing it a regular expression with the g (global search) flag. For example, str.replace(/old/g, 'new') returns a new string where all occurrences of old are replaced with new.

index.ts
const str = 'APPLE banana apple'; const result = str.replace(/apple/gi, 'kiwi'); console.log(result); // 👉️ "kiwi banana kiwi"

The first parameter the replace method takes is a regular expression, and the second - the replacement string.

You would use replace over replaceAll if you need to support very old browsers like Internet Explorer and you aren't transpiling your code to an older version of JavaScript.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.