Flags in ECMAScript String Regular Expressions
ECMAScript String Regular Expressions – Part 5
Forward: It is possible for you to make a case insensitive match. You need what is called a flag for this. There are a good number of flags and each has its own purpose. We shall learn some of them in this part of the series.
By: Chrysanthus Date Published: 26 Jul 2012
Introduction
In this part of the series, we shall use the string search() method as well as the string match() method. You should use the search() method instead of the match() method, when you just want to see if a match occurs or not. That is what the ECMAScript Specification requires. Remember, you compare the result of the search() method to –1 (and not true or false)
The i Flag
By default, matching is case sensitive. To make it case insensitive, you have to use what is called the i flag.
So if we have the regex,
/send/
and then we also have
var subject = “Click the Send button.”
the following code will not produce a match:
var subject = "Click the Send button.";
<script type="text/ECMAScript">
var subject = "Click the Send button.";
if (subject.search(/send/) != -1)
alert('Matched');
else
alert('Not Matched');
</script>
The regex did not match the subject string because the regex has “send” where S is in lower case, but the subject string has “Send” where S is in upper case. If you want this matching to be case insensitive, then your regex will have to be
/send/i
Note the i just after the second forward slash. It is the i flag. The following code will produce a match.
<script type="text/ECMAScript">
var subject = "Click the Send button.";
if (subject.search(/send/i) != -1)
alert('Matched');
else
alert('Not Matched');
</script>
Matching has occurred because we have made the regex case insensitive, with the i flag.
It is possible for you to have more than one sub string in the subject string that would match the regex. By default, only the first sub string in the subject is matched. To match all the sub strings in the subject, you have to use the global flag, g. This is the syntax:
Consider the following subject string:
var subject = "A cat is an animal. A rat is an animal. A bat is a creature.";
In the above subject, you have the sub strings: cat, rat and bat. You have cat first, then rat and then bat. Each of these sub strings match the following regex:
/[cbr]at/
As it is, this pattern will match only the first sub string, “cat”. If you want “cat” and “rat” and “bat” to be matched, you have to use the g flag just as we used the i flag. The following code illustrates this:
<script type="text/ECMAScript">
var subject = "A cat is an animal. A rat is an animal. A bat is a creature.";
if (subject.search(/[cbr]at/g) != -1)
alert('Matched');
else
alert('Not Matched');
</script>
The alert box displays, Matched.
You can capture the different matched sub strings. The following code illustrates this:
<script type="text/ECMAScript">
var subject = "A cat is an animal. A rat is an animal. A bat is a creature.";
var arr = subject.match(/[cbr]at/g);
alert(arr[0]);
alert(arr[1]);
alert(arr[2]);
</script>
The first, second and third elements of the are “cat”, “rat” and “bat”. So the output of the above code is:
cat
rat
bat
This is global matching.
The s flag refers to a single line and the m flag refers to multiple lines in a string. Usually, without these flags, we get what we want. Sometimes, however, we want to keep track of n characters. A file in the hard disk might be made up of many lines of text each ending with the n character. By default, the ^ and $ characters anchor at the beginning and at the end of the subject string, respectively. We can make them anchor the beginning and end of lines. The m flag affects the interpretation of the ^, $ and the dot metahcaracter. Here is the full description of the m flags
- no flags: Here we look at the case where there is no flag just after the second forward slash. Under this condition '.' matches any character except "n" . ^ matches only at the start of the string and $ matches only at the subject string end or before n at the end. This is the default behavior of the dot metacharacter.
- m flag: This makes the subject string behaves like a set of multiple lines. In the subject string, consecutive lines are separated by the n character. So '.' matches any character except "n". In this way ^ and $ are able to match at the start or end of any line within the subject string. Here, ^ matches at the beginning of the string or just after the n character, while $ matches just before the n character.
We shall use examples to illustrate the above two conditions. We start by looking at the first condition.
No Flags
Read the first point above again. Consider the following multiline subject string:
var subject = "The first sentence.\n The second sentence.\n The third sentence.\n";
The subject string has three lines. The following conditional produces a match.
if (subject.search(/second/) != -1)
The sub string “second”, in the second line (sentence) is matched. Consider the following pattern:
/^.*$/
This pattern (regex) is expected under normal circumstances, to match the whole subject string. Let us see if it does so with the above multi-line subject string. Consider the following code:
<script type="text/ECMAScript">
var subject = "The first sentence.\n The second sentence.\n The third sentence.\n";
if (subject.search(/^.*$/) != -1)
alert('Matched');
else
alert('Not Matched');
</script>
If you run this code, no matching will occur. This is because of the presence of the n character in the subject string. By default the dot class does not match the n character.
I hope you now appreciate what the first point above is talking about.
Read the second point above again. Here we look at the effect of the m flag. Consider the following subject string:
subject = "The first sentence.\n The second sentence.\n The third sentence.\n";
The subject string has three lines. The following conditional produces a match.
if (subject.search(/second/m) != -1)
Note that the m flag has been used. The sub string “second”, in the second line is matched. Consider the following pattern:
/^.*$/m
With the m flag, this pattern (regex) should match only one line. Let us see if it does so with the above multi-line subject string. Consider the following code:
<script type="text/ECMAScript">
var subject = "The first sentence.\n The second sentence.\n The third sentence.\n";
var arr = subject.match(/^.*$/m);
alert(arr[0]);
alert(arr[1]);
alert(arr[2]);
</script>
The output is:
The first sentence.
undefined
undefined
As you can see, only the first line is matched. If you want all the lines to be matched, you have to use the g flag as well. The following code illustrates this:
<script type="text/ECMAScript">
var subject = "The first sentence.\n The second sentence.\n The third sentence.\n";
var arr = subject.match(/^.*$/mg);
alert(arr[0]);
alert(arr[1]);
alert(arr[2]);
</script>
The output is:
The first sentence.
The second sentence.
The third sentence.
Using more than one Flag
Know that you can have more than one flag in a regex, like in:
/send/im
The above program also has another example, which is,
/^.*$/mg
Well, it is time for a break. See you in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT