UNIT 5

Regular Expression,
Rollover and Frames
 Contents
5.1. Regular Expression – Language of regular expression , finding
nonmatching characters, entering a range of characters, matching
digits and
nondigits, matching punctuation and symbols, matching words,
replace text using a regular expression, return the matched
characters, regular expression object properties

5.2. Frames – Create a frame, invisible borders of frame, calling a

child window, changing the content and focus of a child window,
accessing elements of another child window

5.3. Rollover - Creating a rollover, text rollovers, multiple actions for a

rollover, more efficient rollover.
5.1 – Regular Expression
■ A Regular Expression is an object that describes a
pattern of characters.

■ A Regular Expression (also “regexp”, or just “reg”) is a

sequence of
characters that forms a search pattern.
■ They are useful for searching and replacing the
characters in the string that match a pattern.

■ For example, regular expressions can be used

– to validate form fields like email addresses and phone
numbers.
– to perform all types of text search and text replace
operations.
– for counting specific characters in a string
5.1.1 – Language of Regular
Expression
■ A Regular Expression is an object that describes a
pattern of characters.

■ A regular expression is very similar to a mathematical

expression, except it tells the browser how to manipulate
text rather than numbers by using special symbols as
operators.
■ RE is a series of characters between two forward
slashes (/..../)

■ For example, if we have to search for “fruit” word in

string then regular expression is /fruit/

■ Slashes /.../ tell JavaScript that we are creating a regular

expression.
5.1.1 – Language of Regular
Expression
■ A regular expression could be defined by using two
ways:
1) Using RegEx constructor
2) Using literal

1) Using RegEx constructor

Syntax - var pattern = new RegExp(‘pattern’ );

Example - var re1 = new RegExp(‘xyz’);

2) Using literal
Syntax - var pattern = /pattern/;
Example - var re2 = /xyz/;
 5.1.1 – Language of Regular Expression
Property Description

g (global match) Find all matches rather than stopping after the
first match.
i (ignore case) Search is case-insensitive means no difference in
A and a.
m (multiline) Treat beginning and end characters (^ and $) as
working over multiple lines. In other words, match
the beginning or end of each line (delimited by \n
or \r)
s ("dotAll") Matches first letter in any newline.

u (unicode) Treat pattern as a sequence of Unicode code

points.
y (sticky) Matches only from the index indicated by the
lastIndex property of this regular expression in the
target string. Does not attempt to match from any
later indexes.
5.1.1 – Language of Regular
Expression
The language of regular expression
consists of following:

1) Character Classes (Brackets)

2) Metacharacters

3) Quantifiers
5.1.1 – Language of Regular
Expression
1) Character Classes (Brackets)
– You can group characters by putting
them in Square brackets.
– hyphen(-) character inside bracket is
used to find a range of characters.e.g. [a-z]
– [...] matches any one of the characters
between the brackets e.g. [abc]
– [^...] matches any one character, but not
one of those inside the brackets e.g. [^abc]
– (x|y) matches any of the alternatives
specified.
 5.1.1 – Language of Regular
Expression
Expression Description
[abc] Find any character between the brackets
[^abc] Find any character NOT between the brackets
[0-9] Find any character between the brackets (any digit)

[^0-9] Find any character NOT between the brackets (any

non-digit)
(x) A grouping or subpattern, which is also stored for later
use
(x|y) Find any of the alternatives specified
5.1.1 – Language of Regular
Expression
2) Metacharacters
– Metacharacters are characters with a special
meaning within the language of regular expression.

Metacharact Description
er
. Find a single character, except newline or
line terminator
\w Find a word character
\W Find a non-word character
\d Find a digit
\D Find a non-digit character
\s Find a whitespace character
5.1.1 – Language of Regular
Expression
2) Metacharacters
– Metacharacters are characters with a special meaning within
the language of regular expression.

Metacharacter Description
\S Find a non-whitespace character
\b Find a match at the beginning/end of a word,
beginning like this: \bHI, end like this: HI\b
\B Find a match, but not at the beginning/end of a
word
\0 Find a NULL character

\n Find a new line character

\f Find a form feed character

 5.1.1 – Language of Regular
Expression
2) Metacharacters
– Metacharacters are characters with a special meaning within
the language of regular expression.

Metacharac Description
ter
\r Find a carriage return character
\t Find a tab character
\v Find a vertical tab character
\xxx Find the character specified by an octal number xxx
\xdd Find the character specified by a hexadecimal
number dd
\udddd Find the Unicode character specified by a
hexadecimal number
dddd
5.1.1 – Language of Regular
Expression
3) Quantifiers
– Quantifiers match a number of instances of a character, group,
or character
class in a string.
– The following table list the quantifiers:
Quantifier Description
* Match zero or more times.
+ Match one or more times.
? Match zero or one time.
{n} Match exactly n times.
{ n ,} Match at least n times.
{n,m} Match from n to m times.
 5.1.1 – Language of Regular
Expression
3) Quantifiers
{n} - Exact count
– A number in curly braces {n} is the simplest quantifier. When you
append it to a
character or character class, it specifies how many characters or
character
classes you want to match.

– For example, the regular expression /\d{4}/ matches a four-digit

number. It is
the same as /\d\d\d\d/

{n,m} - The range

– The range matches a character or character class from n to m times.
– For example, to find numbers that have two, three or four digits, you
use the
regular expression /\d{2,4}/g
 5.1.1 – Language of Regular
Expression
3) Quantifiers
{n, } - n or more times
– Searches for a sequence of n or more times.
– For example, the regular expression /\d{2,}/
will match any number that has two or more
digits.
- One or more times
– The quantifier {1,} means one or more which
has the shorthand as +.
– For example, the \d+ searches for numbers
5.1.1 – Language of Regular
Expression
3) Quantifiers
? - Zero or one time
– The quantifier ? means zero or one. It is the same
as {0,1}.
– For example, /colou?r/ will match both color and
colour

* - Zero or more times

– The quantifier * means zero or more. It is the
same as {0,}.
– For example to match the string Java followed by
any word character, the regular expression will be
/Java\w*/g will match JavaScript and Java
5.1.1 – Language of Regular
Expression
3) Quantifiers
– We often use the quantifiers to form complex
regular expressions.
– The following shows some regular expression
examples that include
quantifiers:
Whole numbers: /^\d+$/
Whole numbers: /^\d+$/
Decimal numbers: /^\d*.\d+$/
Whole numbers and decimal numbers:
/^\d*(.\d+)?$/
Negative, positive whole numbers & decimal
numbers: /^-?\d*(.\d+)?$/
5.1.1 – Language of Regular Expression
Some of the examples of Metacharacters
Metachar Description Example
acter
^ Matches the beginning of ^a : “alice” not “banana”
input ^: “a line\nand break” => 2
match
$ Matches the end of input. a$ : “obama” not “name”
\b Word boundary \bdog\b : “dog”, “dog ” not
“doggy”
\B Not word boundary \Bdog\B : “doggy”, “adogg”
not “dog”
\s Whitespace (space, tab, \sc: matches “a cat” not
newline,...) “xcat”
\S Not white space \Sc: matches “cat” not “a
cat” \d
\d Digit \d: matches “1” in “1abc”
 5.1.1 – Language of Regular
Expression
Some of the examples of Metacharacters

Metacharac Description Example

ter
\D Not digit \D: matches “b” in
“123b”
\w Word (alphanumeric character \w: matches “a” in
including_) “a%”
\W Not word matches \W: “%” in “a%”
5.1.1 – Language of Regular Expression
Some of the examples of Quantifiers
Quantifier Description Example
* Matches the preceding character 0 p*: matches 0 or more
or more times occurrence of letter p
+ Matches the preceding character 1 P+: matches 1 or more
or more times occurrence of letter p
? Matches the preceding character 0 P?: matches 0 or 1
or 1 time occurrence of letter p
{n} Matches exactly n times. P{2}: matches exactly
two occurrence of letter
p
{n, } Matches at least n times P{2,}:Matches at least 2
occurrence of letter p
{n, m} Matches the preceding character n P{2,3}: matches at least
to m times two occurrence of letter
p but not more than 3.
/\*.*\*/ Matches the contents of a C-style
comment /*...*/
5.1.1 – Methods used in Regular
Expression
Method Description
exec() Executes a search for a match in a string. It returns an
array of information or null on a mismatch.
test() Tests for a match in a string. It returns true or false.
match() Returns an array containing all of the matches, including
capturing groups, or null if no match is found.
matchAll() Returns an iterator containing all of the matches, including
capturing groups.
search() Tests for a match in a string. It returns the index of the
match, or -1 if the search fails.
replace() Executes a search for a match in a string, and replaces
the matched substring with a replacement substring.
replaceAll() Executes a search for all matches in a string, and replaces
the matched substrings with a replacement substring.
split() Uses a regular expression or a fixed string to break a
string into an array of substrings.
5.1.2 – Finding non-matching
characters
■ We can search for illegal character(s) by
specifying the illegal character(s) within
brackets and by placing the caret (^) as the
first character in the bracket.

■ Let's see how this works in the following

example: / [ ^ a - z A - Z 0 - 9 . * ] /

■ In this case, the browser is asked to

determine whether the text does not
contain the characters given in square
brackets.
Finding non-matching characters
Example
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Regular Expressions</h2>

<script>
var text = "hello JavaScripts123@";
var pattern = /[^a-z]/g;
var result = text.match(pattern);

document.write(result);
</script>

</body>
</html>
Matching Digits Example
 <!DOCTYPE html>
 <html>
 <body>

 <h2>JavaScript Regular Expressions</h2>

 <script>
 var text = "hello JavaScripts123@";
 var pattern =/\d/g;
 var result = text.match(pattern);

 document.write(result);
 </script>

 </body>
 </html>
Matching Non-Digits Example
 <!DOCTYPE html>
 <html>
 <body>

 <h2>JavaScript Regular Expressions</h2>

 <script>
 var text = "hello JavaScripts123@";
 var pattern =/\D/g;
 var result = text.match(pattern);

 document.write(result);
 </script>

 </body>
 </html>
Matching Punctions and symbols
<html>
<head>
<title> Regular Expression </title>
<body>
<script>
var myStr ="!";
var reg = /[*,#@+|!?.]/g;
var match = myStr.match(reg);
document.write(match);
</script>
</html>
Matching word example
<html>
<head>
<title> Regular Expression </title>
<body>
<script>
var myStr ="Welcome to Rcpp";
var reg = /\bRcpp\b/g;
var match = myStr.match(reg);
document.write(match);
</script>
</html>
Replace() method
 The string.replace() is inbuilt method
in javascript,used to replace part of
string with new string.
 By default, replace() method replaces
only first match.
 Two types of replace
1. Using regular expression
2. Using normal string
 5.2 – Frames
■ Frames are used for splitting up the browser
window into various panes
(sections), into which we can then load different
HTML documents.

■ A collection of frames in the browser window

is known as a frameset. ■ The window is
divided into frames in a similar way the tables
are organized: into rows and columns.

Why Frames? – Frames allows to show

several documents in one
Replace using regular expression
 Replace() method returns a modified
string where the pattern is replaced.
 Syntax:
str.replace(/pattern/attributes, newstr);
e.g.
 Example
 <html>
 <head>
 <title> Regular Expression </title>
 </head>
 <body>
 <script>
 function myfun() {
 var mystr ="Welcome to Rcpp,Rcpp is diploma";
 document.write("Before replace <br>");
 document.write(mystr +"<br>")
 var newstr =mystr.replace(/Rcpp/i,"RCPatel");
 document.write("after replace <br>");
 document.write(newstr +"<br>");
 }
 myfun();
 </script>
 </body>
 </html>
Replace using normal string
The replace() method returns a new
string with value replaced.
Syntax:
String.replace(originalstr, newstr)
OR
String.replaceAll(originalstr, newstr)
 Example
 <script>
 function myfun() {
 var mystr ="Welcome to Rcpp , Rcpp is diploma";
 document.write("Before replace <br>");
 document.write(mystr +"<br>")
 var newstr =mystr.replace("Rcpp","RCPatel");
 document.write("after replace <br>");
 document.write(newstr +"<br>");
 document.write("after replaceAll <br>");
 var newstr =mystr.replaceAll("Rcpp","RCPatel");
 document.write(newstr +"<br>");
 }
 myfun();
 </script>
5.1.9 – Regular expression
object properties
 Frame
■ Frames are used for splitting up the browser window into
various panes
(sections), into which we can then load different HTML
documents.
■ A collection of frames in the browser window is known as
a frameset.
■ The window is divided into frames in a similar way the
tables are organized: into rows and columns.
Why Frames
– Frames allows to show several documents in one page.
_Useful for navigation
_useful for attaching pages from other sites
Frames
 5.2.1 –Create a frame
■ There are 3 tags need to know for
frames:
1) <frameset>
2) <frame>
3) <noframe>
■ <frameset>and <noframe> must
always be closed.
<frame> does not.
5.2.1 –Create a frame
<frameset>

■ <frameset> tag is used define a collection of frames

■ Main Attributes: cols, rows
■ Other Attributes: border, bordercolor, frameborder,
framespacing
■ Javascript Attributes: onblur, onfocus, onload,
onunload
■ The <frameset> tag defines, how to divide the
window into frames.
■ The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical
frames.
5.2.1 –Create a frame
■ <frame> tag defines a single frame within a
frameset.

■ There will be a FRAME element for each

division created by the FRAMESET element.

■ Main Attributes: src, name

■ Other Attributes: frameborder, marginwidth,

marginheight, scrolling, noresize
5.2.1 –Create a frame example
 <html>
 <head>
 <title>HTML Frames</title>
 </head>
 <frameset rows="50%, 50%">
 <frame name="f1" src="frame1.html" />
 <frame name="f2" src="frame2.html" />
 <noframes>
 <body>Your browser does not support frames.</body>
 </noframes>
 </frameset>
 </html>
 5.2.2 –Invisible borders of frame
 The purpose of the HTML frameborder
attribute is to specify whether or not to
display a border around a frame.
 The value of this attribute can be set to “1”
or “0”.
 Syntax
 <frame frameborder="value" >.....</frame>
Value Description
1 To display a border around the
frame. Default value.
0 Not to display a border around the
frame.
5.2.2 –Invisible borders of frame
<html>
<head>
<title>HTML Frames</title>
</head>

<frameset rows="50%,50%">
<frame src="" frameBorder="1">
<frameset cols="50%,50%">
<frame src="" frameBorder="1">
</frameset>
</frameset>
</html>
 Top and Parent property of
frame
 Window or frame, that opens inside parent window is a
child window.
 Child window/frame can be called or accessed from one
child window to another child window by using parent
property.
 The parent property returns the parent window (of the
current window).
 The parent property is read-only.
 The parent property is not the same as the top property.
 window.parent returns the immediate parent of a
window.
 window.top returns the topmost window in the hierarchy
of windows.
Open, access new frame and its elements using
anchors
 Example
Parentwin.html
<html>
<head>
<title>Parent Window</title>
</head>

<frameset cols="50%,50%">
<frame src="frame_1.html" name="f1">
<frame src="" name="f2">
</frameset>
</html>
 Example (contd.)
Frame_1.html
<html>
<head>
<title> Child Window1 </title>
<body>
<h1> Frame 1 </h1>
<input type="text" name="text" value=""/><br><br>
<input type="button" name="button" value="click
me"/><br><br>
<a href="frame_2.html" target="f2">Call to frame 2</a>;
</body>
</html>
 Example(contd)
Frame_2.html
<html>
<head>
<title> Child Window2 </title>
</head>
<body style="background-
color:powderblue;">
<h1> Frame 2 <br> It is child window</h1>
<frame framename="f2">
</body>
</html>
 Rollover
Most web developers first use JavaScript for
rollovers.
■ A Rollover means a webpage changes when the
user moves mouse
cursor over and away from an object on the page.
■ It is often used in advertising.
■ It is often used in advertising.
■ A rollover may replace one image with another.
■ There are two ways to create rollover – using
plain HTML – using a mixture of JavaScript and
HTML
5.3.1 – Creating Rollover
onMouseOver

■ The keyword that is used to create

rollover is the onmousover event.
■ The mouseOver event is triggered
when the mouse cursor moves over the
object
■ It can be used for rollovers.
5.3.1 – Creating Rollover
onMouseOut
■ The mouseOut event is triggered
when the mouse cursor moves off
an object
■ Usually a rollover has a mouse over
and mouse out part to restore
the original image.
Example rolling over image
 <html>
 <head>
 <title>Create a rollover example</title>
 </head>
 <body>
 <img src="sad.gif" width="500"
onmouseover="src='happy.gif'"
 onmouseout="src='sad.gif'"/>

 <p>Mouse over me</p>

 </body>
 </html>
Text Rollover
 Rollover can be created for text too.
 Rolling over the specified text can be
used to have more information of text.
 Such rollovers are used to make good
use of text and associated graphics, for
better understanding by users, making
webpage attractive as well as interactive.
 Such rollovers can be created by simple
HTML as well as using javascript events
and functions.
 Example rolling over text
<html>
<head>
<script>
MyFruits=new Array('apple.jpg','banana.jpg','orange.jpg')
fruit=0
function Show(fruit){
document.DisplayFruit.src=MyFruits[fruit] }
</script>
</head>
<body>
<img src="apple.jpg" name="DisplayFruit" "width=300, height=300"/></p>
<td><a onmouseover="Show(0)"
onmouseout="document.DisplayFruit.src='move.jpg'"><b>Show Apple</b></a><br><br>
<td><a onmouseover="Show(1)"
onmouseout="document.DisplayFruit.src='move.jpg'"><b>Show
Banana</b></a><br><br>
<td><a onmouseover="Show(2)"
onmouseout="document.DisplayFruit.src='move.jpg'"><b>Show
Orange</b></a><br><br>
</body>
</html>
5.3.3 – Multiple actions for
Rollover
 It can be possible to perform multiple actions with
rollover using different mouse event handlers
- Onclickwhen mouse on an element
- OnmouseoverWhen cursor comes over element
- Onmouseout When cursor leaves an element
- Onmousedown When mouse button pressed
over element
- OnmouseupWhen mouse button released over
element
- OnmousemoveWhen mouse movement takes
place
5.3.4 – More efficient Rollover
 When an image is accessed at first time,
second time or more using rollover, each time
it is loaded in browser.
 This activity results in taking some time, and
the delay occurs for user in browsing.
 To avoid this, using rollover once image is
loaded first time, it is stored in browser’s
cache in terms of variables.
 When user accesses same image number of
times, it can be available without taking time
to load again as it is already loaded in
browser’s cache .
 Example
 <html>  </head>
 <head>  <body>
 <title> frame </title>
 <img src="DSA.jpg"
height="200" width="200"
 <script> name="cover">
 dsa = new Image;  <img src="" height="1"
width="1"><br>
 wt = new Image;
 <a
 net = new Image; onmouseover="document.cover.
src=dsa.src">Elephant</a><br>
 if(document.images)
 <a
 { onmouseover="document.cover.
 dsa.src ='elephant.jpg'; src=wt.src">Tiger</a><br>
 wt.src ='tiger.jpg';
 <a
onmouseover="document.cover.
 net.src ='lion.jpg'; src=net.src">Lion</a><br>
 }  </body>
 else  </html>
 {
 dsa.src ='';
 wt.src ='';
 net.src ='';
 }
 </script>