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?

The common ways to do a case-insensitive string comparison in Javascript are:

  1. Change both strings to lowercase – if (FIRST.toLowerCase() == SECOND.toLowerCase()) { SAME }
  2. Use locale compare – if (FIRST.localeCompare(SECOND, "en", {sensitivity: "base"}) == 0) { SAME }
  3. Use regular expression – if (/^FIRST/i.test(SECOND)) { SAME }

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

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

CASE INSENSITIVE COMPARISON

All right, let us now get into the various ways to do case-insensitive string comparisons.

 

METHOD 1) CONVERT STRINGS TO UPPER OR LOWER CASE

1-lower-upper-case.js
// (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

2a-locale-compare.js
// (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

2b-locale-compare.js
// (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

3-regex.js
// (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.

 

 

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

COMPATIBILITY CHECKS

These examples will work generally well across all browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Case Insensitive String Comparison In Javascript (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *