How to Replace a String Case-Insensitively in JavaScript
A common string manipulation task is to replace a substring without regard to its case. For example, you might want to replace all instances of "apple", "Apple", or "APPLE" with "orange". The standard replace() and replaceAll() methods in JavaScript are case-sensitive by default, but you can easily achieve a case-insensitive replacement by using a regular expression with the ignore (i) flag.
This guide will teach you how to perform both single and multiple case-insensitive replacements using the modern replaceAll() and the classic replace() methods.
The Core Problem: Replacements are Case-Sensitive by Default
Standard string replacement methods match characters exactly, including their case.
Example of problem:
// Problem: This only replaces the lowercase "apple".
let text = 'An apple a day. Apple pie is delicious.';
// This is case-sensitive and will not replace "Apple".
let newText = text.replaceAll('apple', 'orange');
console.log(newText);
Output Incorrect!
An orange a day. Apple pie is delicious.
The Solution: The Regular Expression i Flag
To make a search case-insensitive, you must use a regular expression with the i (ignore case) flag.
Syntax: a regular expression is defined between two forward slashes (/pattern/flags).
/apple/: This regex matches the literal string "apple"./apple/i: This regex matches "apple", "Apple", "APPLE", "aPpLe", etc.
Replacing All Occurrences (Case-Insensitive)
To replace every occurrence of a substring in a case-insensitive manner, you need to use a regular expression with two flags: the i (ignore case) flag and the g (global) flag.
Problem: you want to replace all instances of "apple" (regardless of case) with "orange".
let text = 'An apple a day. Apple pie is delicious.';
Solution: use replace() with a global, case-insensitive regular expression.
let text = 'An apple a day. Apple pie is delicious.';
// The regex /apple/gi matches all occurrences of "apple", ignoring case.
let newText = text.replace(/apple/gi, 'orange');
console.log(newText);
Output:
An orange a day. orange pie is delicious.
Important: The modern replaceAll() method cannot be used with a global (/g) regular expression and will throw a TypeError. When you need a global regex-based replacement, you must use replace().
Replacing Only the First Occurrence (Case-Insensitive)
If you only want to replace the very first match found, you use the same regex but simply omit the global (g) flag.
Problem: you want to replace only the first "apple" (in any case) that you find.
let text = 'An apple a day. Apple pie is delicious.';
Solution:
let text = 'An apple a day. Apple pie is delicious.';
// The regex /apple/i matches the first occurrence of "apple", ignoring case.
let newText = text.replace(/apple/i, 'orange');
console.log(newText);
Output:
An orange a day. Apple pie is delicious.
Conclusion
Performing a case-insensitive replacement in JavaScript is a simple task that requires a regular expression.
- To replace all occurrences case-insensitively, use
string.replace(/your-text/gi, 'replacement'). Remember to include both theg(global) andi(ignore case) flags. - To replace only the first occurrence case-insensitively, use
string.replace(/your-text/i, 'replacement'), omitting thegflag.
By using the i flag, you can easily handle text variations and write more robust string manipulation logic.