CSS UNIT 5 - REGULAR EXPRESSION, ROLLOVER, FRAMES (14 M)

Syllabus :
5.1 regular expression :
i. in JavaScript regular expressions are also objects.
ii. A regular expression is a sequence of characters that forms a search
pattern.
iii. The search pattern can be used for text search and text replace
operation.
iv. When you create a regular expression. you test the regular
expression against a string.
v. Regular expression is a series of characters between two forward
slashes (/...../).
vi. For example, the regular expression /green/ might be matched
against the string. "The green grass”if green is contained in the string,
then there is a successful match.
vii. A regular expression, or regex, is a special sequence of characters
that helps you find patterns in strings (text). You can use regex to:

 Search for specific text

 Validate formats (like emails or phone numbers)
 Replace parts of text
 Extract data from text

5.1.2 Language of Regular expression :

i. In JavaScript, regular expressions are represented by RegExp objects.

ii. A regular expression is a type of object. It can be either constructed
with the RegExp constructor or written as a literal value by enclosing
a pattern in forward slash(/) character.

var re1 = new RegExp(“abc”); // using constructor

OR

Var re2 = /abc/; //using literal

iii. Every programming language implements regular expressions. There

are small differences between each implementation but the general
concepts apply almost everywhere.
iv. The language of Regular expression consist of Quantifiers, Meta
characters, and Character classes.
1. Literal Characters :
Literal characters are the simplest type of regular expression. They
match themselves exactly in a search.

 Example:
o Pattern: "cat"
o Matches: "cat" (it will only match this exact sequence of
letters).

2. Metacharacters :
Metacharacters are special symbols that have a unique meaning in the
context of regular expressions. These symbols are used to build complex
patterns.

. Matches any single character

\n Matches new line character
\t Matches a tab
\d Matches a digit
\D Matches non-digit
\w Matches any word character (letters, digits, or underscore) (equivalent to
[A-Za-z0-9_]).
\W Matches any non-word character (anything that is not a letter, digit, or
underscore) (equivalent to [^A-Za-z0-9_]).
\s Matches white space character(space, tab, newline)
\S Matches non- whitespace character
\ Use \ to escape special character. For ex, \. matches a dot and \\ matches
a backslash.
^ Match at beginning of the string
$ Match at end of the input string
() Match the group pattern
3. Quantifiers :
Quantifiers provide a simple way to specify within a pattern how many
times a particular Character or set of characters is allowed to repeat
itself.

There are three non-explicit quantifiers:

Quantifier Meaning
* O or more occurrences
+ 1 or more occurrences
? O or 1 occurrencee

fo? -> foo and food are partially incorrect

Note : Quantifiers always refer to the pattern immediately preceding (to

the left 00 the quantifier, which is normally a single character unless
parentheses are used to create a pattern group.

There are three explicit quantifiers:

Quantifier Meaning
{n} Repeat exactly n time
{n,m} Repeat at least n time, but no more than m times
{n,} Repeat at least n times
4. Character classes :
Character classes allow you to define a set of characters to match. They
are enclosed in square brackets [].

1. Simple Character Class: Matches any one character within the

brackets.

1. Example:
1. Pattern: [abc]
2. Matches: "a", "b", "c"
3. Doesn’t match: "d"

2. Range in Character Class: Matches any one character within the

specified range.

1. Example:
1. Pattern: [a-z]
2. Matches: "a", "m", "z"
3. Doesn’t match: "A", "1"

3. Negated Character Class: Matches any character not in the brackets.

1. Example:
1. Pattern: [^abc]
2. Matches: "d", "e", "1"
3. Doesn’t match: "a", "b", "c"
pattern matches unmatches
a.c abc, a1c, a-c ac , abbc
\d\d 12, 34 ab, a1
\d+ a, abc, xyz 123, 1a
\w hello, world123 @, #!
\w @, , ! abc, 12
\s \t, “ “ abc
\s abc,123 ““
^a apple banana
a$ banana apple
ca*t ct, cat, caaaaaat bt
ca+t cat, caaat ct
colou?r color, colour colouur
a{3} aaa aa,aaaa
a{2,4} aa,aaa, aaaa a,aaaaa
a{2,} aa,aaa,aaaa a
[a,b,c] a,b,c d
[a-z] a,z,b 1,A
[^abc] A,1,s a,b,c
(abc)+ abc,abcabc ab
cat|dog cat,dog bat
Regexp flags :

1. When creating a new regular expression object, you can also specify
additional flags to control how the pattern will be used when
matching with other string.
2. The flags are either appended after the regular expression in the
literal notation, or passed into the constructor in the normal
notation. Regular expressions may have flags that affect the search.
3. There are 6 flags in java.
 i - when we write this flag serach is case insensetive.
 g - when we write this flag it will serach for all matches.
 m - when we write this flag multiline mode is activated.
 s - “Dotall” mode, allows to match newline.
 u - enables full unicode support.
 y - sticky mode

Syntax :

// Find all matches (global matching) and using case insensitive matching

var re = / regular expression/gi;

OR

var re = new RegExp (“regular expression”, “gi”);

Methods used in Regular Expressions:

There are two sets of methods to deal with regular expressions:

I. RegExp class and its methods (test() and exe()).
2. String class and its methods (search(), match(), replace()).
1. RegExp.test() Method :
i. The test() method checks if a pattern is present in a string or not.
It returns true if a match is found, otherwise it returns false.
ii. RegExp.test() method takes string as argument.

Program :

<head>
<title>Test method </title>
<script>
function check() {
var regex = /abc/;
var str = document.getElementById("txt").value;
var res = regex.test(str);
document.getElementById("para").innerHTML = res;
}
</script>
</head>
<body>
Enter text : <input type="text" id="txt">
<button onclick="check()">check</button>
<p id="para"> </p>
</body>

Output :
2. RegExp.exec() Method

I. The exec() method searches a string for a specified pattern and

returns the first match it finds. If no match is found, it returns null.
II. RegExp.test() method takes string as argument.

Program :
<head>
<title>RegExp exec() Method</title>
<script>
function check() {
var regex = /abc/gmi;
var str = document.getElementById("txt").value;
var res = regex.exec(str);
document.getElementById("para").innerHTML = res ? res[0] :
'No match found';
}
</script>
</head>
<body>
Enter text: <input type="text" id="txt">
<input type="button" onclick="check()" value="Check">
<p id="para"> </p>
</body>

Output :
3. String.search() Method
i. The search() method searches a string for a specified value or
regular expression and returns the position of the match, or -1 if
no match is found.
ii. String.search() Method takes regexp as argument.

Program :

<head>
<title>String search() Method</title>
<script>
function check() {
var regex = /abc/gmi;
var str = document.getElementById("txt").value;
var res = str.search(regex);
document.getElementById("para").innerHTML = res;
}
</script>
</head>
<body>
Enter text: <input type="text" id="txt">
<input type="button" onclick="check()" value="Check">
<p id="para"> </p>
</body>

Output :
4. String.match() Method
I. The match() method searches a string for a match against a
regular expression and returns the match string or null if no
match is found.
II. String.search() Method takes regexp as argument.

Program :

<head>
<title>String match() Method</title>
<script>
function check() {
var regex = /abc/gmi;
var str = document.getElementById("txt").value;
var res = str.match(regex);
document.getElementById("demo1").innerHTML = res ? res :
'No match found';
}
</script>
</head>
<body>
Enter text: <textarea id="txt"></textarea>
<input type="button" onclick="check()" value="Check">
<p id="demo1"></p>
</body>

Output :
4. String.replace() Method
i. The replace() method searches for a match in a string and
replaces it with a new value.
ii. String.search() Method takes two parameter first one is regexp
and second one is string to be replaced.

Program :

<head>
<title>String replace() Method</title>
<script>
function check() {
var regex = /abc/gmi;
var str = document.getElementById("txt").value;
var res = str.replace(regex, 'XYZ');
document.getElementById("para").innerHTML = res;
}
</script>
</head>
<body>
Enter text: <input type="text" id="txt">
<input type="button" onclick="check()" value="Check">
<p id="para"> </p>
</body>

Output :