What is the importance of '/i' flag in JavaScript?



Let us understand first about regular expressions before jump into I flag. A string of characters that creates a search pattern is called a regular expression. The search pattern can be applied to text replacement and search operations. A regular expression might be a simple pattern with one letter or a more complex one. Text search and replace operations of every kind can be carried out using regular expressions.

The literal notation and the constructor are the two methods for creating a RegExp object.

  • The literal notation consists of a pattern among both two slashes and optionally flags beyond the second slash. In JavaScript, you declare objects using curly brackets{}. Curly braces{} are the object literal syntax, which means that writing out a new object in this manner is known as constructing an object literal. Whenever a regular expression will remain constant, it is crucial to use literal notation. For example the usage of literal notation in loops, is not recommended.

  • A string of optional flags is the second parameter for the constructor function, which accepts otherwise a string or a RegExp object as its first parameter. The use of a constructor allows programmers to write regular expressions in JavaScript. Regex expressions are accepted by this method as function arguments in the form of Strings. As of ECMAScript 6, constructor functions now can accept literals from regular expressions. When writing regular expressions whose pattern will change as they are being executed, it is best to utilise the constructor function.

You can regulate how a pattern match is treated by using a pattern modifier. Pattern modifiers are added right after the regular expression; for instance, you can use the I modifier to search for a pattern regardless of case by typing /pattern/i.

The I flag for the regular expression is either used or not used, depending on the ignoreCase property. The read-only property ignoreCase of a specific regular expression type.

If the I flag was used, the ignoreCase value will be true; otherwise, it will be false. In order to find a match in a string, the I flag instructs this case must be ignored.

For case-insensitive matching in the string, JavaScript uses the RegExp I Modifier.

Syntax

Following is the syntax of ā€˜/Iā€™ flag in Javascript

/regexp/i

Or

new RegExp("regexp", "i")

Example 1

Let's see how the I modifier works in this example to demonstrate a case-insensitive match.

<!DOCTYPE html> <html> <title>What is the importance of '/i' flag in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"></div> <script> let siteTitle = "Visit Tutorialspoint to know more about coding"; let regExp = /Tutorialspoint/i; let matchResult = siteTitle.match(regExp); document.getElementById("result").innerHTML = matchResult; </script> </body> </html>

Example 2

In this example let us understand using ingnoreCase. If somehow the I flag was used, the ignoreCase value will be true; otherwise, it will be false. In order to find a match in a string, the I flag instructs that case should be disregarded.

This property is not directly editable.

<!DOCTYPE html> <html> <title>What is the importance of '/i' flag in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"></div> <script> let regIgno = new RegExp('tutorialspoint', 'i'); document.getElementById("result").innerHTML =regIgno.ignoreCase; </script> </body> </html>

Example 3

The former is often used when a regular expression cannot be dynamic, such as when a user-defined expression is involved, and the latter when the regular expression remains constant. You can instruct the regular expression to do a case-insensitive replacement by passing it the I flag āˆ’

<!DOCTYPE html> <html> <title>What is the importance of '/i' flag in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <script> const regExp = /JavaScript/i; let origString = 'Tutorialspoint is the best platform for JavaScript developers.'; let newString = origString.replace(regExp, 'React Js'); document.write(origString +"<br>"); document.write(newString); </script> </body> </html>

Example 4

In this example let us understand how to RegExp function test()

<!DOCTYPE html> <html> <title>What is the importance of '/i' flag in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"></div> <script> let siteTitle = "Visit Tutorialspoint"; let regExp = /Tutorialspoint/i; let testResult = regExp.test(siteTitle); document.getElementById("result").innerHTML = testResult; </script> </body> </html>

Advertisements