Skip to main content

How to Remove a Substring from a String in JavaScript

Removing a piece of text from a string is a fundamental operation in JavaScript. Whether you're cleaning user input, sanitizing data, or manipulating text, you need an efficient way to remove specific characters or words. Modern JavaScript provides powerful, built-in string methods like replace() and replaceAll() that make this task simple and readable.

This guide will teach you the standard methods for removing the first occurrence or all occurrences of a substring. We will also cover more manual techniques using slice() and split()/join() for specialized cases.

The Core Method: String.prototype.replace()​

The replace() method is the standard tool for finding a substring and replacing it with a new one. To remove the substring, you simply provide an empty string ('') as the replacement.

By default, when you pass a string as the first argument, replace() will only affect the first occurrence it finds.

For example, you want to remove the first instance of the word "blue" from a sentence.

// Problem: Remove only the first "blue".
const sentence = 'The blue car and the blue house.';

Solution:

const sentence = 'The blue car and the blue house.';
const substringToRemove = 'blue';

const newSentence = sentence.replace(substringToRemove, '');

console.log(newSentence);
// Output: 'The  car and the blue house.'
note

Important: Strings are immutable in JavaScript. The replace() method does not change the original string; it returns a new string with the modification.

Removing All Occurrences with String.prototype.replaceAll()​

The replaceAll() method is the modern and most readable way to remove every occurrence of a substring.

For example, you want to remove all instances of the word "blue".

// Problem: Remove both instances of "blue".
const sentence = 'The blue car and the blue house.';

Solution:

const sentence = 'The blue car and the blue house.';
const substringToRemove = 'blue';

const newSentence = sentence.replaceAll(substringToRemove, '');

console.log(newSentence);
// Output: 'The  car and the  house.'
note

Note on Regular Expressions: You can also achieve a "replace all" effect with replace() by providing a regular expression with the global (g) flag.

const newSentence = sentence.replace(/blue/g, '');
console.log(newSentence); 
// Output: 'The  car and the  house.'

However, for simple string replacements, replaceAll() is more explicit and easier to read.

An Alternative for Removing All Occurrences: split() and join()​

Before replaceAll() was introduced, a common trick to remove all occurrences of a substring was to split the string by that substring and then join the resulting array back together.

Solution:

const sentence = 'The blue car and the blue house.';
const substringToRemove = 'blue';

// 1. Split the string into an array, using the substring as the delimiter.
const parts = sentence.split(substringToRemove);
console.log(parts); 
// Output: [ 'The ', ' car and the ', ' house.' ]

// 2. Join the array back into a string with an empty separator.
const newSentence = parts.join('');

console.log(newSentence);
// Output: 'The  car and the  house.'
note

While this works, replaceAll() is the more modern and direct solution.

A Manual Method: Removing a Substring by Index with slice()​

If you need to remove a piece of a string at a specific, known location, the slice() method is the right tool. This is a more manual approach that gives you precise control.

The logic:

  1. Find the starting index of the substring you want to remove.
  2. Get the part of the string before the substring.
  3. Get the part of the string after the substring.
  4. Concatenate the two parts.

Solution:

const str = 'one,two,three';
const substringToRemove = ',two';

// 1. Find the starting index.
const index = str.indexOf(substringToRemove); // index is 3

if (index !== -1) {
  // 2. Get the part before (from start to index).
  const part1 = str.slice(0, index); // 'one'
  
  // 3. Get the part after (from index + length of substring).
  const part2 = str.slice(index + substringToRemove.length); // ',three'

  // 4. Concatenate.
  const newString = part1 + part2;
  
  console.log(newString); 
  // Output: 'one,three'
}
note

This method is more complex but is very useful when you only want to remove a substring at a specific location, not all occurrences.

Conclusion​

JavaScript provides several powerful methods for removing substrings, each suited for different use cases.

  • To remove only the first occurrence of a substring, use string.replace('sub', '').
  • To remove all occurrences, the modern and recommended method is string.replaceAll('sub', '').
  • For more complex pattern matching, use string.replace(/pattern/g, '') with a regular expression.
  • To remove a substring at a specific index, use a combination of indexOf() and slice().

Table of Contents