JS String Compare Ignore Case

In this article, we will see how to compare the string while ignore case in js. Before that, we need to know what is ignoring the case.

What is ignoring cases?

In JavaScript, “ignoring case” means that when comparing two strings, any differences in uppercase or lowercase letters are not considered significant. For example, the strings “Welcome” and “welcome” would be considered equal if we are ignoring the case.

3Ways to Compare String while Ignore Case

We can compare the js string while ignore case using these three ways:

1. Using ‘toLowerCase()‘ or ‘toUpperCase()‘ method
2. Using ‘localeCompare()‘ method with the ‘ignoreCase‘ option
3. Using RegExp with the i flag

1.Using ‘toLowerCase()’ or ‘toUpperCase()’ method:

It is one of the simplest and most used methods for comparing strings while ignoring cases. When we compare two strings in JavaScript, the comparison is case-sensitive by default, which means strings are unequal. So, before comparing strings, both strings should be converted to either lowercase or uppercase using ‘toLowerCase()‘ or ‘toUpperCase()’ method. After converting, we can compare the string using double equal ‘==’ or triple equal ‘===’ operators. We can convert both strings to either lowercase or uppercase. Do not convert one string to lowercase and another to uppercase.

let str1 = "Hello World";
let str2 = "hello world";

if (str1.toLowerCase() === str2.toLowerCase()) {
  console.log("The strings are equal");
} else {
  console.log("The strings are not equal");
}

// Output : The strings are equal.

1. In this above example code, we initialized the “str1” to “Hello World” and “str2” to “hello world”. Note that, ‘the str1’ and str2 are similar but have different case styling.
2. Then we converted both strings to lowercase using the “toLowerCase()” method.
3. After the str1 and str2 strings are converted to lowercase, then we checked whether these are equal or not using the “===” triple equals operator.
4. Then we set the condition using if/else statement, if both strings are equal print “The strings are equal” or if not prints “The strings are not equal”.
5. We got an output ‘strings are equal’.

Note: If we check these strings are equal without converting lowercase or uppercase, we always get “strings are not equal”. So, don’t forget to convert.

2. Using ‘localeCompare()’ method with ‘ignoreCase’ option

In this method, we are comparing using unicode values ​​of both strings and allowing case sensitivity by setting the ‘ignoreCase’ option to ‘true’. Let’s see an example:

let str1 = "Tommy@gmail.com";
let str2 = "TOMMY@gmail.com";

const result = str1.localeCompare(str2, undefined, { ignoreCase: true });

if (result === 0) {
  console.log("The strings are equal, ignoring case.");
} else {
  console.log("The strings are not equal, ignoring case.");
}

// Output : The strings are equal, ignoring case.

1. In this example, we have created a constant ‘result’ and then we compare the two strings by using ‘localeCompare()’ method.
2. And then we passed the first argument as ‘str2’, the second as ‘undefined’ and the third argument as an options object that specifies the ‘ignoreCase’ property set to ‘true’, which means that the comparison should be case-insensitive.
3. If the constant ‘result’ returns ‘0’, the strings are equal.

3. Using RegExp with the i flag:

By creating a regular expression with the i flag, we can perform a case-insensitive search for the strings. Let’s see an example:

const str1 = "Mrjohn@gmail.com";
const str2 = "mrjohn@gmail.com";

const regex = new RegExp(str1, "i");
const match = regex.test(str2);

console.log(match); // true

1. In this example, we have defined two strings ‘str1’ and ‘str2’. Note that, both strings are similar but with different casings.
2. We have created a constant ‘regex’ with ‘RegExp‘ constructor. Then passed inside the RegExp() function passed the ‘str1’ first string and ‘i’ flag to ignore the case.
3. Then we test if the ‘str2’ matches the regular expression ‘regex’ using the test() method. And stored the result in the constant ‘match’.
4. Finally we logged the constant ‘match’. The test() method returns ‘true’ if the second string ‘str2’ matches the regular expression ‘regex’, otherwise it returns false.

See the output, it returns ‘true’ because both strings are equal to each other. You can use if/else statement to return other text if the strings are equal.