Skip to main content

How to Remove Vowels from a String in JavaScript

A common string manipulation task, often seen in coding challenges or data sanitization, is to remove all vowels (a, e, i, o, u) from a string. The most efficient and concise way to achieve this is by using the String.prototype.replace() method with a simple regular expression.

This guide will teach you how to use a regular expression to remove all vowels from a string, explaining how the pattern and its flags work to handle both uppercase and lowercase vowels.

The Core Method: replace() with a Regular Expression​

The replace() method, when used with a global regular expression, is the perfect tool for finding and replacing all occurrences of a pattern in a string. To remove vowels, we simply replace them with an empty string.

Problem: You have a string and you need to create a new string containing only the non-vowel characters.

// Problem: Remove all vowels from this string.
const originalString = 'Hello, World!';

Solution:

const originalString = 'Hello, World!';

// The regex /[aeiou]/gi finds all vowels, case-insensitively.
const stringWithoutVowels = originalString.replace(/[aeiou]/gi, '');

console.log(stringWithoutVowels); // Output: Hll, Wrld!
note

This single line of code is all that's needed to perform the operation.

The Regular Expression Explained​

The regular expression /[aeiou]/gi is the key to this solution. Let's break down its components:

  • / ... /: These are the delimiters that mark the beginning and end of the regular expression pattern.
  • [...]: This is a character set. It tells the regex engine to match any single character that appears inside the brackets.
    • aeiou: We list the characters we want to match—the lowercase vowels.
  • g: This is the global flag. It is crucial. It tells the replace() method to replace all matches it finds, not just the first one. Without it, only the first "e" in "Hello" would be removed.
  • i: This is the case-insensitive flag. It tells the regex engine to match both lowercase (a, e, i, o, u) and uppercase (A, E, I, O, U) vowels, even though we only listed the lowercase ones in our character set.

So, /[aeiou]/gi translates to: "Find every 'a', 'e', 'i', 'o', or 'u', regardless of its case, and do it for the whole string."

A Note on Immutability​

It is important to remember that strings in JavaScript are immutable. The replace() method does not change the original string. Instead, it returns a new, modified string.

const originalString = 'JavaScript';
const newString = originalString.replace(/[aeiou]/gi, '');

console.log(newString);      // Output: JvScrpt
console.log(originalString); // Output: JavaScript (The original is unchanged)
note

You must always assign the result of the replace() method to a new variable or reassign it to the original one.

Practical Example: A Reusable removeVowels Function​

If you need to perform this operation frequently, it's a good practice to encapsulate the logic in a reusable function.

/**
 * Removes all vowels (case-insensitive) from a string.
 * @param {string} str The input string.
 * @returns {string} The string with all vowels removed.
 */
function removeVowels(str) {
  if (typeof str !== 'string') {
    return '';
  }
  return str.replace(/[aeiou]/gi, '');
}

// Example Usage:
const sentence = 'This is a test sentence.';
const result = removeVowels(sentence);

console.log(result); // Output: Ths s  tst sntnc.

Conclusion​

Removing vowels from a string is a straightforward task in JavaScript thanks to the power of regular expressions.

  • The recommended best practice is to use the replace() method with a regular expression: str.replace(/[aeiou]/gi, '').
  • The character set [aeiou] defines the characters to be removed.
  • The g (global) and i (case-insensitive) flags are essential for ensuring all vowels are removed correctly, regardless of their position or case.

Table of Contents