1463

How do I perform case insensitive string comparison in JavaScript?

3
  • 44
    see the newly added .localeCompare() javascript method. Only supported by modern browsers at the time of writting (IE11+). see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Adriano
    Commented Sep 26, 2014 at 10:43
  • 8
    @AdrienBe "A".localeCompare( "a" ); returns 1 in the Chrome 48 Console.
    – manuell
    Commented Feb 25, 2016 at 9:22
  • 1
    @manuell localeCompare does case insensitive comparison if you pass the { sensitivity: 'accent' } or { sensitivity: 'base' } option. "A".localeCompare("a", undefined, { sensitivity: 'accent' }) === 0.
    – JLRishe
    Commented Jan 10, 2019 at 3:25

23 Answers 23

1531

EDIT: This answer was originally added over 10 years ago. Today should use localeCompare. See the other answers.

The simplest way to do it (if you're not worried about special Unicode characters) is to call toUpperCase:

var areEqual = string1.toUpperCase() === string2.toUpperCase();
10
  • 63
    Conversion to upper or lower case does provide correct case insensitive comparisons in all languages. i18nguy.com/unicode/turkish-i18n.html Commented Jan 26, 2010 at 16:15
  • 68
    @sam: I know. That's why I wrote if you're not worried about special Unicode characters.
    – SLaks
    Commented Jan 26, 2010 at 16:22
  • 201
    Is there a reason to prefer toUpperCase over toLowerCase?
    – jpmc26
    Commented May 27, 2014 at 15:57
  • 179
  • 15
    @Kugel This answer is 9 years old. There is new functionality since then so as of the date of your comment, no, it is not the best JS has to offer. See below answer on localeCompare which was updated more recently (but still five years ago). I'm not aware of anything that has changed in the last five years that would make localeCompare no longer the best answer. Commented Aug 23, 2019 at 3:56
363

EDIT: This answer was originally added 9 years ago. Today you should use localeCompare with the sensitivity: 'accent' option:

function ciEquals(a, b) {
    return typeof a === 'string' && typeof b === 'string'
        ? a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
        : a === b;
}

console.log("'a' = 'a'?", ciEquals('a', 'a'));
console.log("'AaA' = 'aAa'?", ciEquals('AaA', 'aAa'));
console.log("'a' = 'á'?", ciEquals('a', 'á'));
console.log("'a' = 'b'?", ciEquals('a', 'b'));

The { sensitivity: 'accent' } tells localeCompare() to treat two variants of the same base letter as the same unless they have different accents (as in the third example) above.

Alternatively, you can use { sensitivity: 'base' }, which treats two characters as equivalent as long as their base character is the same (so A would be treated as equivalent to á).

Note that the third parameter of localeCompare is not supported in IE10 or lower or certain mobile browsers (see the compatibility chart on the page linked above), so if you need to support those browsers, you'll need some kind of fallback:

function ciEqualsInner(a, b) {
    return a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0;
}

function ciEquals(a, b) {
    if (typeof a !== 'string' || typeof b !== 'string') {
        return a === b;
    }

    //      v--- feature detection
    return ciEqualsInner('A', 'a')
        ? ciEqualsInner(a, b)
        : /*  fallback approach here  */;
}

Original answer

The best way to do a case insensitive comparison in JavaScript is to use RegExp match() method with the i flag.

Case-insensitive search

When both strings being compared are variables (not constants), then it's a little more complicated 'cause you need to generate a RegExp from the string but passing the string to RegExp constructor can result in incorrect matches or failed matches if the string has special regex characters in it.

If you care about internationalization don't use toLowerCase() or toUpperCase() as it doesn't provide accurate case-insensitive comparisons in all languages.

http://www.i18nguy.com/unicode/turkish-i18n.html

8
  • 5
    @Quandary, yes, that's what I said had to be handled--"you need to generate a RegExp from the string but passing the string to RegExp constructor can result in incorrect matches or failed matches if the string has special regex characters in it" Commented Jun 6, 2014 at 17:29
  • 30
    Using this is the most costly solution for case-insensitive string comparison. A RegExp is meant for complicated pattern matching, as such, it needs to build a decision tree for each pattern, then executes that against input strings. While it would work, it is comparable to taking a jet airplane to go shopping on the next block. tl;dr: please don't do this. Commented Apr 1, 2015 at 11:30
  • 3
    i could use localeCompare(), but its returning -1 for 'a'.localeCompare('A') and like the op I'm looking for case insensitive string compare.
    – StingyJack
    Commented Mar 19, 2018 at 1:53
  • 6
    @StingyJack to do case-insensitive compare using localeCompare, you should do 'a'.localeCompare('A', undefined, { sensitivity: 'base' }) Commented Aug 1, 2018 at 15:58
  • 2
    Note: The localeCompare version requires that the JavaScript engine support the ECMAScript® Internationalization API, which it is not required to do. So before relying on it, you might want to check that it works in the environment you're using. For instance: const compareInsensitive = "x".localeCompare("X", undefined, {sensitivity: "base"}) === 0 ? (a, b) => a.localeCompare(b, undefined, {sensitivity: "base"}) : (a, b) => a.toLowerCase().localeCompare(b.toLowerCase()); or some such. Commented Aug 21, 2019 at 6:31
169

As said in recent comments, string::localeCompare supports case insensitive comparisons (among other powerful things).

Here's a simple example

'xyz'.localeCompare('XyZ', undefined, { sensitivity: 'base' }); // returns 0

And a generic function you could use

function equalsIgnoringCase(text, other) {
    return text.localeCompare(other, undefined, { sensitivity: 'base' }) === 0;
}

Note that instead of undefined you should probably enter the specific locale you are working with. This is important as denoted in the MDN docs

in Swedish, ä and a are separate base letters

Sensitivity options

Sensitivity options tabulated from MDN

Browser support

As of time of posting, UC Browser for Android and Opera Mini do not support locale and options parameters. Please check https://caniuse.com/#search=localeCompare for up to date info.

1
  • 1
    As I'm fairly sure browsers don't regularly remove support for features from older versions, the Browser support listed here is incorrect or at least incomplete (according to your caniuse link). IE < 11, Firefox < 29, Chrome < 24, and Safari < 10 (just to list the popular browsers) also do not support the locale and options parameters, and most likely didn't when this answer was posted. This is probably far more useful for new readers than the obscure browsers listed that basically don't support any somewhat modern features.
    – M.Babcock
    Commented Nov 4, 2020 at 23:42
55

Update:

As per the comments, previous answer checks for source contains keyword, to make it equality check added ^ and $.

(/^keyword$/i).test(source)

With the help of regular expression also we can achieve.

(/keyword/i).test(source)

/i is for ignoring case. If not necessary we can ignore and test for NOT case sensitive matches like

(/keyword/).test(source)
4
  • 20
    Using a regex like this will match substrings! In your example the string keyWORD will indead result in a positive match. But the string this is a keyword yo or keywords will also result in a positive match. Be aware of that :-)
    – Elmer
    Commented Oct 25, 2017 at 10:25
  • 7
    This does not answer the Equality check (case insensitive) as asked in the question! But, this is a Contains check! Don't use it Commented Feb 6, 2019 at 6:07
  • 7
    Of course, to match the entire string, the regexp can be changed into /^keyword$/.test(source), but 1) if keyword is not a constant, you'd need to do new RegExp('^' + x + '$').test(source) and 2) resorting to a regexp to test something as simple as case-insensitive string equality is not at all very efficient.
    – JHH
    Commented May 10, 2019 at 8:08
  • const regexpEqual = (a, b) => (new RegExp(^${a}$, "gi")).test(b)
    – Sam Hasler
    Commented Mar 29, 2023 at 9:40
35

Remember that casing is a locale specific operation. Depending on scenario you may want to take that in to account. For example, if you are comparing names of two people you may want to consider locale but if you are comparing machine generated values such as UUID then you might not. This why I use following function in my utils library (note that type checking is not included for performance reason).

function compareStrings (string1, string2, ignoreCase, useLocale) {
    if (ignoreCase) {
        if (useLocale) {
            string1 = string1.toLocaleLowerCase();
            string2 = string2.toLocaleLowerCase();
        }
        else {
            string1 = string1.toLowerCase();
            string2 = string2.toLowerCase();
        }
    }

    return string1 === string2;
}
5
  • 1
    Is there a reason you use "!!" to perform an explicit boolean conversion, instead of allowing the if clause to evaluate the truthiness of the values?
    – Celos
    Commented Mar 28, 2014 at 13:52
  • It's not required. I guess I had it from my other version of more complicated code. I have updated the answer. Commented Mar 31, 2014 at 10:22
  • @thekodester your function has a bug. This compareStrings("", "") will give false in spite the fact the strings are equal.
    – Serg
    Commented Nov 20, 2018 at 12:06
  • @Sergey Doing that returns true for me. Perhaps it is a bug with your browser? Commented Jul 20, 2019 at 3:15
  • Locale is definitely an important factor to consider. +1
    – PHP Guru
    Commented Sep 7, 2020 at 7:18
14

if you are concerned about the direction of the inequality (perhaps you want to sort a list) you pretty-much have to do case-conversion, and as there are more lowercase characters in unicode than uppercase toLowerCase is probably the best conversion to use.

function my_strcasecmp( a, b ) 
{
    if((a+'').toLowerCase() > (b+'').toLowerCase()) return 1  
    if((a+'').toLowerCase() < (b+'').toLowerCase()) return -1
    return 0
}

Javascript seems to use locale "C" for string comparisons so the resulting ordering will be ugly if the strings contain other than ASCII letters. there's not much that can be done about that without doing much more detailed inspection of the strings.

13

I have recently created a micro library that provides case-insensitive string helpers: https://github.com/nickuraltsev/ignore-case. (It uses toUpperCase internally.)

var ignoreCase = require('ignore-case');

ignoreCase.equals('FOO', 'Foo'); // => true
ignoreCase.startsWith('foobar', 'FOO'); // => true
ignoreCase.endsWith('foobar', 'BaR'); // => true
ignoreCase.includes('AbCd', 'c'); // => true
ignoreCase.indexOf('AbCd', 'c'); // => 2
0
8

Use RegEx for string match or comparison.

In JavaScript, you can use match() for string comparison, don't forget to put i in the regular expression. This flag will force case insensitive testing.

Example:

To confirm the string test of any case is included anywhere inside the matchString variable

var matchString = "Test";
if (matchString.match(/test/i)) {
    alert('matchString contains the substring "test" case insensitive');
}
else {
    alert('matchString does not contain the substring "test" case insensitive');
}

To confirm matchString variable only contains test of any case, and no additional characters, then use zero-width assertions ^ and $ in the regular expression. These will require test to appear directly after the start of the string and directly before the end of the string respecitivly.

var matchString = "Test";
if (matchString.match(/^test$/i)) {
    alert('matchString equals "test" case insensitive');
}
else {
    alert('matchString does not equal "test" case insensitive');
}
7
  • 3
    Make sure you're okay with partial matches, otherwise matchString.match(/^test$/i).
    – hackel
    Commented Feb 13, 2020 at 2:10
  • What is instead of lowercase"test" you have var x = 'test', would matchString.match(/x/i) work? If not, what would work? Commented May 5, 2020 at 18:03
  • @RazvanZamfir , In case of dynamic pattern, you can use RegExp Object Ex: var x = new RegExp(/test/, "gi"); matchString.match(x); Commented Mar 26, 2021 at 14:58
  • Or const x_regex = new RegExp(`^${x}$`, "gi");, though that's messy.
    – user4945014
    Commented Oct 15, 2021 at 2:13
  • bad performance with regex
    – serge
    Commented Sep 30, 2022 at 8:31
7

Suppose we want to find the string variable needle in the string variable haystack. There are three gotchas:

  1. Internationalized applications should avoid string.toUpperCase and string.toLowerCase. Use a regular expression which ignores case instead. For example, var needleRegExp = new RegExp(needle, "i"); followed by needleRegExp.test(haystack).
  2. In general, you might not know the value of needle. Be careful that needle does not contain any regular expression special characters. Escape these using needle.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");.
  3. In other cases, if you want to precisely match needle and haystack, just ignoring case, make sure to add "^" at the start and "$" at the end of your regular expression constructor.

Taking points (1) and (2) into consideration, an example would be:

var haystack = "A. BAIL. Of. Hay.";
var needle = "bail.";
var needleRegExp = new RegExp(needle.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), "i");
var result = needleRegExp.test(haystack);
if (result) {
    // Your code here
}
1
  • You bet! All you need to do is replace the new RegExp(...) part in line 3 with the following: new RegExp("^" + needle.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + "$", "i");. This makes sure that there are no other characters before or after your search string needle. Commented Jul 26, 2016 at 21:23
7

Lots of answers here, but I like to add a sollution based on extending the String lib:

String.prototype.equalIgnoreCase = function(str)
{
    return (str != null 
            && typeof str === 'string'
            && this.toUpperCase() === str.toUpperCase());
}

This way you can just use it like you do in Java!

Example:

var a = "hello";
var b = "HeLLo";
var c = "world";

if (a.equalIgnoreCase(b)) {
    document.write("a == b");
}
if (a.equalIgnoreCase(c)) {
    document.write("a == c");
}
if (!b.equalIgnoreCase(c)) {
    document.write("b != c");
}

Output will be:

"a == b"
"b != c"

String.prototype.equalIgnoreCase = function(str) {
  return (str != null &&
    typeof str === 'string' &&
    this.toUpperCase() === str.toUpperCase());
}


var a = "hello";
var b = "HeLLo";
var c = "world";

if (a.equalIgnoreCase(b)) {
  document.write("a == b");
  document.write("<br>");
}
if (a.equalIgnoreCase(c)) {
  document.write("a == c");
}
if (!b.equalIgnoreCase(c)) {
  document.write("b != c");
}

1
  • This is the most cleaver solution, and opens the door to so many other operations you might want, but are missing in the language.
    – Ro Yo Mi
    Commented Feb 2, 2023 at 17:30
7

There are two ways for case insensitive comparison:

  1. Convert strings to upper case and then compare them using the strict operator (===).
  2. Pattern matching using string methods:

Use the "search" string method for case insensitive search.

<!doctype html>
<html>

<head>
  <script>
    // 1st way

    var a = "apple";
    var b = "APPLE";
    if (a.toUpperCase() === b.toUpperCase()) {
      alert("equal");
    }

    //2nd way

    var a = " Null and void";
    document.write(a.search(/null/i));
  </script>
</head>

</html>

6

If both strings are of the same known locale, you may want to use Intl.Collator object like this:

function equalIgnoreCase(s1: string, s2: string) {
    return new Intl.Collator("en-US", { sensitivity: "base" }).compare(s1, s2) === 0;
}

Obviously, you may want to cache the Collator for better efficiency.

The advantages of this approach is that it should be much faster than using RegExps and is based on an extremely customizable (see description of locales and options constructor parameters in the article above) set of ready-to-use collators.

1
  • Another option for sensitivity is accent, which keeps it case insensitive, but treats a and á as separate characters. So base or accent could both be appropriate depending on the exact needs. Commented Apr 13, 2018 at 16:28
5

I like this quick shorthand variation -

export const equalsIgnoreCase = (str1, str2) => {
    return (!str1 && !str2) || (str1 && str2 && str1.toUpperCase() == str2.toUpperCase())
}

Quick in processing, and does what it is intended to.

3

I wrote a extension. very trivial

if (typeof String.prototype.isEqual!= 'function') {
    String.prototype.isEqual = function (str){
        return this.toUpperCase()==str.toUpperCase();
     };
}
3
  • 1
    What happens two codebases with different ideas of how String#isEqual should work try to exist at the same time? Commented Sep 20, 2013 at 22:15
  • 3
    @KhanSharp A lot of people consider it an anti-pattern to modify the prototype of built in types. This is why people might be down voting your answer.
    – jt000
    Commented Jul 29, 2014 at 12:45
  • 1
    Isn't it ill-considered to prefer unknown method definitions? For example as soon as some browser decides to implement String#isEqual or Object#isEqual natively all of your pages behave differently and might do weird things if the specification doesn't match yours exactly.
    – Robert
    Commented Dec 8, 2014 at 0:07
3

Even this question has already been answered. I have a different approach to using RegExp and match to ignore case sensitivity. Please see my link https://jsfiddle.net/marchdave/7v8bd7dq/27/

$("#btnGuess").click(guessWord);

function guessWord() {

  var letter = $("#guessLetter").val();
  var word = 'ABC';
  var pattern = RegExp(letter, 'gi'); // pattern: /a/gi

  var result = word.match(pattern);
  alert('Ignore case sensitive:' + result);
}
2
str = 'Lol', str2 = 'lOl', regex = new RegExp('^' + str + '$', 'i');
if (regex.test(str)) {
    console.log("true");
}
0
2

Convert both to lower string (only once for performance reasons) and compare them with inline ternary operator:

function strcasecmp(s1,s2){
    s1=(s1+'').toLowerCase();
    s2=(s2+'').toLowerCase();
    return s1>s2?1:(s1<s2?-1:0);
}
1
  • 1
    Who says C is dead? :D
    – Seth
    Commented Sep 15, 2019 at 21:37
1

How about NOT throwing exceptions and NOT using slow regex?

return str1 != null && str2 != null 
    && typeof str1 === 'string' && typeof str2 === 'string'
    && str1.toUpperCase() === str2.toUpperCase();

The above snippet assumes you don't want to match if either string is null or undefined.

If you want to match null/undefined, then:

return (str1 == null && str2 == null)
    || (str1 != null && str2 != null 
        && typeof str1 === 'string' && typeof str2 === 'string'
        && str1.toUpperCase() === str2.toUpperCase());

If for some reason you care about undefined vs null:

return (str1 === undefined && str2 === undefined)
    || (str1 === null && str2 === null)
    || (str1 != null && str2 != null 
        && typeof str1 === 'string' && typeof str2 === 'string'
        && str1.toUpperCase() === str2.toUpperCase());
1
  • Or just str1 == str2 || ...
    – SLaks
    Commented Oct 26, 2016 at 0:59
1

Since no answer clearly provided a simple code snippet for using RegExp, here's my attempt:

function compareInsensitive(str1, str2){ 
  return typeof str1 === 'string' && 
    typeof str2 === 'string' && 
    new RegExp("^" + str1.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + "$", "i").test(str2);
}

It has several advantages:

  1. Verifies parameter type (any non-string parameter, like undefined for example, would crash an expression like str1.toUpperCase()).
  2. Does not suffer from possible internationalization issues.
  3. Escapes the RegExp string.
2
1

If you know you're dealing with ascii text then you can just use a uppercase/lowercase character offset comparison.

Just make sure the string your "perfect" string (the one you want to match against) is lowercase:

const CHARS_IN_BETWEEN = 32;
const LAST_UPPERCASE_CHAR = 90; // Z
function strMatchesIgnoreCase(lowercaseMatch, value) {
    let i = 0, matches = lowercaseMatch.length === value.length;
    while (matches && i < lowercaseMatch.length) {
        const a = lowercaseMatch.charCodeAt(i);
        const A = a - CHARS_IN_BETWEEN;
        const b = value.charCodeAt(i);
        const B = b + ((b > LAST_UPPERCASE_CHAR) ? -CHARS_IN_BETWEEN : CHARS_IN_BETWEEN);
        matches = a === b // lowerA === b
            || A === b // upperA == b
            || a === B // lowerA == ~b
            || A === B; // upperA == ~b
        i++;
    }
    return matches;
}
1

For better browser compatibility you can rely on a regular expression. This will work in all web browsers released in the last 20 years:

String.prototype.equalsci = function(s) {
    var regexp = RegExp("^"+this.replace(/[.\\+*?\[\^\]$(){}=!<>|:-]/g, "\\$&")+"$", "i");
    return regexp.test(s);
}

"PERSON@Ü.EXAMPLE.COM".equalsci("person@ü.example.com")// returns true

This is different from the other answers found here because it takes into account that not all users are using modern web browsers.

Note: If you need to support unusual cases like the Turkish language you will need to use localeCompare because i and I are not the same letter in Turkish.

"I".localeCompare("i", undefined, { sensitivity:"accent"})===0// returns true
"I".localeCompare("i", "tr", { sensitivity:"accent"})===0// returns false
1
  • Might be better to use Object.defineProperty to avoid the equalsci method being enumerable.
    – user4945014
    Commented Oct 15, 2021 at 2:11
0

This is an improved version of this answer.

String.equal = function (s1, s2, ignoreCase, useLocale) {
    if (s1 == null || s2 == null)
        return false;

    if (!ignoreCase) {
        if (s1.length !== s2.length)
            return false;

        return s1 === s2;
    }

    if (useLocale) {
        if (useLocale.length)
            return s1.toLocaleLowerCase(useLocale) === s2.toLocaleLowerCase(useLocale)
        else
            return s1.toLocaleLowerCase() === s2.toLocaleLowerCase()
    }
    else {
        if (s1.length !== s2.length)
            return false;

        return s1.toLowerCase() === s2.toLowerCase();
    }
}



Usages & tests:

String.equal = function (s1, s2, ignoreCase, useLocale) {
    if (s1 == null || s2 == null)
        return false;

    if (!ignoreCase) {
        if (s1.length !== s2.length)
            return false;

        return s1 === s2;
    }

    if (useLocale) {
        if (useLocale.length)
            return s1.toLocaleLowerCase(useLocale) === s2.toLocaleLowerCase(useLocale)
        else
            return s1.toLocaleLowerCase() === s2.toLocaleLowerCase()
    }
    else {
        if (s1.length !== s2.length)
            return false;

        return s1.toLowerCase() === s2.toLowerCase();
    }
}

// If you don't mind extending the prototype.
String.prototype.equal = function(string2, ignoreCase, useLocale) {
  return String.equal(this.valueOf(), string2, ignoreCase, useLocale);
}

// ------------------ TESTS ----------------------
console.log("Tests...");

console.log('Case sensitive 1');
var result = "Abc123".equal("Abc123");
console.assert(result === true);

console.log('Case sensitive 2');
result = "aBC123".equal("Abc123");
console.assert(result === false);

console.log('Ignore case');
result = "AbC123".equal("aBc123", true);
console.assert(result === true);

console.log('Ignore case + Current locale');
result = "AbC123".equal("aBc123", true);
console.assert(result === true);

console.log('Turkish test 1 (ignore case, en-US)');
result = "IiiI".equal("ıiİI", true, "en-US");
console.assert(result === false);

console.log('Turkish test 2 (ignore case, tr-TR)');
result = "IiiI".equal("ıiİI", true, "tr-TR");
console.assert(result === true);

console.log('Turkish test 3 (case sensitive, tr-TR)');
result = "IiiI".equal("ıiİI", false, "tr-TR");
console.assert(result === false);

console.log('null-test-1');
result = "AAA".equal(null);
console.assert(result === false);

console.log('null-test-2');
result = String.equal(null, "BBB");
console.assert(result === false);

console.log('null-test-3');
result = String.equal(null, null);
console.assert(result === false);

0

We could also do this using ASCII:

function toLower(a){

    let c = "";

    
    for(let i = 0;i<a.length;i++){

        
        let f = a.charCodeAt(i);
        if(f < 95){

            c += String.fromCharCode(f+32);
        }
        else{

            c += a[i];
        }
    }

    return c;
}
function compareIt(a,b){


    return toLower(a)==toLower(b);


}
console.log(compareIt("An ExamPlE" , "an example"));

Not the answer you're looking for? Browse other questions tagged or ask your own question.