Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to do case insensitive string comparison of strings in JavaScript
In this tutorial, we will learn how to do a case-insensitive string comparison of strings in JavaScript. Case insensitive comparison means strings should be considered equal regardless of whether they are written in lowercase or uppercase letters. This technique is commonly used in search functionality, where "TutorialsPoint" and "tutorialspoint" should be treated as identical.
There are four main methods to perform case-insensitive string comparisons:
toUpperCase()
toLowerCase()
localeCompare()
RegExp()
Using the toUpperCase() Method
The toUpperCase() method converts all alphabetic characters in a string to uppercase. Numbers, special characters, and letters already in uppercase remain unchanged.
Syntax
str.toUpperCase()
Example
In the following example, we compare two strings that are identical but have different cases by converting both to uppercase before comparison.
<html>
<body>
<h2>Case insensitive comparison using <i>toUpperCase()</i> method</h2>
<div id="str1"></div>
<script>
var str1 = "TexT with uPPer CAsE aND loWeR cASe";
var str2 = "TexT with Upper Case aND LoWER CAse";
var output = document.getElementById("str1");
output.innerHTML += "str1 = " + str1 + "<br/>";
output.innerHTML += "str2 = " + str2 + "<br/>";
if (str1.toUpperCase() === str2.toUpperCase()) {
output.innerHTML += "The strings are converted to Uppercase and they are equal" + "<br/>";
} else {
output.innerHTML += "The strings are converted to Uppercase and they are not equal";
}
</script>
</body>
</html>
str1 = TexT with uPPer CAsE aND loWeR cASe str2 = TexT with Upper Case aND LoWER CAse The strings are converted to Uppercase and they are equal
Using the toLowerCase() Method
Similar to toUpperCase(), the toLowerCase() method converts all alphabetic characters to lowercase. Numbers, special characters, and letters already in lowercase remain unchanged.
Syntax
str.toLowerCase()
Example
In this example, we convert both strings to lowercase before comparing them.
<html>
<body>
<h2>Case insensitive comparison using <i>toLowerCase()</i> method</h2>
<div id="str2"></div>
<script>
var str1 = "TutorialsPoint";
var str2 = "tuTorialspoInt";
var output = document.getElementById("str2");
output.innerHTML += "str1 = " + str1 + "<br/>";
output.innerHTML += "str2 = " + str2 + "<br/>";
if (str1.toLowerCase() === str2.toLowerCase()) {
output.innerHTML += "The strings are converted to Lowercase and they are equal";
} else {
output.innerHTML += "The strings are converted to Lowercase and they are not equal";
}
</script>
</body>
</html>
str1 = TutorialsPoint str2 = tuTorialspoInt The strings are converted to Lowercase and they are equal
Using the localeCompare() Method
The localeCompare() method returns a number indicating whether a reference string comes before, after, or is equal to the given string in sort order. This method is particularly useful for comparing strings in different languages and locales.
Syntax
localeCompare(compareString, locales, options)
Parameters
compareString ? The string to compare with
locales ? Language tag (optional)
options ? Comparison options including sensitivity settings
Example
In this example, we use localeCompare() with the 'base' sensitivity option to ignore case and accent differences.
<html>
<body>
<h2>Case insensitive comparison using <i>localeCompare()</i> method</h2>
<div id="str3"></div>
<script>
var str1 = "apPlE";
var str2 = "áppLE";
var output = document.getElementById("str3");
function caseInsensitive(a, b) {
return a.localeCompare(b, 'en', {
sensitivity: 'base'
}) === 0;
}
output.innerHTML += "str1 = " + str1 + "<br/>";
output.innerHTML += "str2 = " + str2 + "<br/>";
output.innerHTML += "str1 === str2 is " + caseInsensitive(str1, str2);
</script>
</body>
</html>
str1 = apPlE str2 = áppLE str1 === str2 is true
Using the RegExp() Object
Regular expressions provide another way to perform case-insensitive comparisons using the 'i' flag, which ignores case when matching patterns.
Syntax
new RegExp('^' + str + '$', 'i')
Parameter Details
^ ? Start of string anchor
$ ? End of string anchor
str ? The pattern to match
i ? Case-insensitive flag
Example
In this example, we create a regular expression pattern and use the test() method to check if the strings match case-insensitively.
<html>
<body>
<h2>Case insensitive comparison using <i>RegExp()</i> object</h2>
<div id="str4"></div>
<script>
var str1 = "tutorialspoint";
var str2 = "TUTORIALSPOINT";
var output = document.getElementById("str4");
output.innerHTML += "str1 = " + str1 + "<br/>";
output.innerHTML += "str2 = " + str2 + "<br/>";
let pattern = new RegExp('^' + str1 + '$', 'i');
if (pattern.test(str2)) {
output.innerHTML += "str1 and str2 are same";
} else {
output.innerHTML += "str1 and str2 are not same";
}
</script>
</body>
</html>
str1 = tutorialspoint str2 = TUTORIALSPOINT str1 and str2 are same
Comparison of Methods
| Method | Performance | Locale Support | Best Use Case |
|---|---|---|---|
toUpperCase() |
Fast | Limited | Simple ASCII comparisons |
toLowerCase() |
Fast | Limited | Simple ASCII comparisons |
localeCompare() |
Moderate | Excellent | International text, accented characters |
RegExp() |
Slower | Basic | Pattern matching, complex comparisons |
Conclusion
For simple case-insensitive comparisons, toLowerCase() or toUpperCase() are the most efficient choices. Use localeCompare() when working with international text or accented characters, and RegExp() for complex pattern matching scenarios.
2K+ Views
