3 Ways To Do Case Insensitive String Comparison In Javascript

Welcome to a quick tutorial on how to do case-insensitive string comparison in Javascript. By default, the == comparison operator in Javascript is case-sensitive. Just how can we do a case-insensitive comparison in Javascript then?

That covers the quick basics, but let us walk through a few more examples in this guide – Read on!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/case-insensitive-string-comparison-in-javascript/” title=”Case-Insensitive String Comparison In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

METHOD 1) CONVERT STRINGS TO UPPER OR LOWER CASE

// (A) STRINGS
var first = "Hello World";
var second = "hello world";
 
// (B) COMPARISON
console.log(first == second); // false
console.log(first.toLowerCase() == second.toLowerCase()); // true
console.log(first.toUpperCase() == second.toUpperCase()); // true

This is probably the easiest way to do a case-insensitive comparison. Just turn both strings to all upper or lower case before comparison.

 

 

METHOD 2) LOCALE COMPARE

2A) LOCALE COMPARE BASICS

// (A) VARIABLES
var first, second;
 
// (B) LOCALE COMPARE
// (B1) RETURNS 0 WHEN BOTH FIRST & SECOND ARE EQUAL
first = "C"; second = "C";
console.log(first.localeCompare(second)); // 0 (equal)
 
// (B2) RETURNS 1 WHEN FIRST IS AFTER SECOND
first = "C"; second = "B";
console.log(first.localeCompare(second)); // 1 (c is after b)
 
// (B3) RETURNS -1 WHEN FIRST IS BEFORE SECOND
first = "A"; second = "B";
console.log(first.localeCompare(second)); // -1 (a is before b)
 
// (C) CAN ALSO COMPARE "COMPLEX STRINGS"
first = "Car"; second = "Cow";
console.log(first.localeCompare(second)); // -1 (car is before cow)
console.log(second.localeCompare(first)); // 1 (cow is after car)

Next, we have a rather “confusing” method using localeCompare(). This function compares two strings FIRST.localeCompare(SECOND) and will return:

• 0 when FIRST is equals to SECOND.
• 1 when FIRST is “alphabetically after” SECOND.
• -1 when FIRST is “alphabetically before” SECOND.

IMPORTANT NOTE – The behavior of localeCompare() pretty much depends on the browser implementation and the user’s current locale. By default, it is most likely to be case-sensitive. But we can tweak this behavior, see below for the example.

 

2B) LOCALE COMPARE WITH OPTIONS

// (A) STRINGS
var first = "CAR";
var second = "car";
 
// (B) DEFAULT LOCALE COMPARE
// This will most likely return 1.
// Capital "CAR" has precedence over small "car".
console.log(first.localeCompare(second));
 
// (C) LOCALE COMPARE WITH OPTIONS
// Set to case-insensitive compare.
// This will now return 0.
console.log(
  first.localeCompare(second, "en", {
    sensitivity: "base",
    ignorePunctuation: true
  })
);

So why would we want to go through so much trouble to use this funky localeCompare() function? Because it is capable of taking in various options, we can “tweak” the comparison.

• en Compare both strings in the English language.
• sensitivity: "base" Set the comparison to be case-insensitive, make it accept that á is the same as a.
• ignorePunctuation: true Ignore punctuations.

Yep, it is better to use localeCompare() when comparing 2 potentially complicated strings. It will even work for strings that are not in English. But of course, take note that the performance of this is much slower than the simple == operator.

 

 

METHOD 3) REGULAR EXPRESSION

// (A) THE SETING
var thestring = "COW";

// (B) CASE SENSITIVE PATTERN MATCHING
var pattern = /^cow$/;                // must match "cow" exactly
console.log(pattern.test(thestring)); // false

// (C) CASE INSENSITIVE PATTERN MATCHING
var pattern = /^cow$/i;               // match "cow"
console.log(pattern.test(thestring)); // true

Finally, we have the dreaded regular expression. For beginners who have never heard of it – A regular expression is simply a “multi-purpose matching pattern” used to compare, replace, or search a string. In this example, the pattern /^cow$/i means:

• / Marks the start and end of the pattern. Something like HTML start and end tags.
• ^cow$ Must match “cow” exactly. Yes, those “strange symbols” are necessary.
• If we remove ^$ and change the search pattern to cow, it will have a different meaning. This changes the matching pattern to “so long as the string contains cow somewhere”. For example, cow will return true and cower will also return true.
• i turns the matching to case insensitive.

Yep. While regular expressions are powerful, they are also very “inhuman” and difficult to use. It is still a good one to keep up your sleeves anyway.

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

COMPATIBILITY CHECKS

• Locale Compare – CanIUse

These examples will work generally well across all browsers.

 

LINKS & REFERENCES

• How to do case insensitive string comparison? – StackOverflow
• Compare the Case Insensitive strings in JavaScript – GeeksForGeeks
• toLowerCase and toUpperCase – MDN
• localeCompare – MDN
• Regular Expressions – MDN

 

INFOGRAPHIC CHEAT SHEET