UNIT V

Regular Expression, Rollover and Frame

Regular Expression:
A regular expression is a sequence of characters that forms a search pattern.The search pattern
can be used for text search and text replace operations.
What Is a Regular Expression?

A regular expression is a sequence of characters that forms a search pattern.When you search
for data in a text, you can use this search pattern to describe what you are searching for.A regular
expression can be a single character, or a more complicated pattern.Regular expressions can be
used to perform all types of text search and text replace operations.

Writing a regular expression pattern

A regular expression pattern is composed of simple characters, such as /abc/, or a combination of

simple and special characters, such as /ab*c/ or /Chapter (\d+)\.\d*/. The last example includes
parentheses, which are used as a memory device. The match made with this part of the pattern is
remembered for later use, as described in

Note: If you are already familiar with the forms of a regular expression, you may also read the
cheat sheet for a quick lookup for a specific pattern/construct.

Using simple patterns

Simple patterns are constructed of characters for which you want to find a direct match. For
example, the pattern /abc/ matches character combinations in strings only when the exact
sequence "abc" occurs (all characters together and in that order). Such a match would succeed in
the strings "Hi, do you know your abc's?" and "The latest airplane designs evolved from
slabcraft." In both cases the match is with the substring "abc". There is no match in the string
"Grab crab" because while it contains the substring "ab c", it does not contain the exact substring
"abc".

Using special characters

When the search for a match requires something more than a direct match, such as finding one or
more b's, or finding white space, you can include special characters in the pattern. For example,
to match a single "a" followed by zero or more "b"s followed by "c", you'd use the pattern /ab*c/:
the * after "b" means "0 or more occurrences of the preceding item." In the string
"cbbabbbbcdebc", this pattern will match the substring "abbbbc".

The following pages provide lists of the different special characters that fit into each category,
along with descriptions and examples.
Assertions
Assertions include boundaries, which indicate the beginnings and endings of lines and words,
and other patterns indicating in some way that a match is possible (including look-ahead, look-
behind, and conditional expressions).
Character classes
Distinguish different types of characters. For example, distinguishing between letters and digits.
Groups and ranges
Indicate groups and ranges of expression characters.
Quantifiers
Indicate numbers of characters or expressions to match.
Unicode property escapes
Distinguish based on unicode character properties, for example, upper- and lower-case letters,
math symbols, and punctuation.

Using regular expressions in JavaScript

Regular expressions are used with the RegExp methods test() and exec() and with the String
methods match(), replace(), search(), and split(). These methods are explained in detail in the
JavaScript reference.

Methods that use regular expressions

Method Description
Executes a search for a match in a string. It returns an array of information or null
exec()
on a mismatch.
test() Tests for a match in a string. It returns true or false.
Returns an array containing all of the matches, including capturing groups, or null
match()
if no match is found.
matchAll() Returns an iterator containing all of the matches, including capturing groups.
Tests for a match in a string. It returns the index of the match, or -1 if the search
search()
fails.
Executes a search for a match in a string, and replaces the matched substring with
replace()
a replacement substring.
split() Uses a regular expression or a fixed string to break a string into an array of
Methods that use regular expressions
Method Description
substrings.

When you want to know whether a pattern is found in a string, use the test() or search() methods;
for more information (but slower execution) use the exec() or match() methods. If you use exec()
or match() and if the match succeeds, these methods return an array and update properties of the
associated regular expression object and also of the predefined regular expression object,
RegExp. If the match fails, the exec() method returns null (which coerces to false).

Syntax

A regular expression could be defined with the RegExp constructor, as follows –

var pattern =newRegExp(pattern, attributes);

or

simplyvar pattern =/pattern/attributes;

Here is the description of the parameters

 Pattern: A string that specifies the pattern of the regular expression or another regular
expression.
 Attributes: An optional string containing any of the "g", "i", and "m" attributes that
specify global, case-insensitive, and multiline matches, respectively.

Modifiers

Modifiers are used to perform case-insensitive and global searches:

Modifier Description

g - Perform a global match (find all matches rather than

stopping after the first match)

i- Perform case-insensitive matching

m - Perform multiline matching

Brackets

Brackets are used to find a range of characters:

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|y) Find any of the alternatives specified

Metacharacters

Metacharacters are characters with a special meaning:

Metacharacter Description

\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

\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 NUL character

\n Find a new line character

\f Find a form feed character

\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

Quantifiers

n+: Matches any string that contains at least one n

n*: Matches any string that contains zero or more occurrences of n

n? : Matches any string that contains zero or one occurrences of n

n{X}: Matches any string that contains a sequence of X n's

n{X,Y} :Matches any string that contains a sequence of X to Y n's

n{X,} : Matches any string that contains a sequence of at least X n's

n$ : Matches any string with n at the end of it

^n : Matches any string with n at the beginning of it

?=n : Matches any string that is followed by a specific string n

?!n : Matches any string that is not followed by a specific string n

RegExp Object Properties

Property Description
constructor Returns the function that created the RegExp object's prototype
global Checks whether the "g" modifier is set
ignoreCase Checks whether the "i" modifier is set
lastIndex Specifies the index at which to start the next match
multiline Checks whether the "m" modifier is set
source Returns the text of the RegExp pattern

RegExp Object Methods

Method Description
compile() Compiles a regular expression
exec() Tests for a match in a string. Returns the first match
test() Tests for a match in a string. Returns true or false
toString() Returns the string value of the regular expression

Using String Methods

In JavaScript, regular expressions are often used with the two string methods: search() and
replace().
 The search() method uses an expression to search for a match, and returns the position of
the match.
 The replace() method returns a modified string where the pattern is replaced.

Using String search() With a String

The search() method searches a string for a specified value and returns the position of the match:
Example
Use a string to do a search for "W3schools" in a string:
var str = "Visit W3Schools!";
var n = str.search("W3Schools");

Using String search() With a Regular Expression

Example :Use a regular expression to do a case-insensitive search for "w3schools" in a string:
var str = "Visit W3Schools";
var n = str.search(/w3schools/i);
The result in n will be: 6

Using String replace() With a String

The replace() method replaces a specified value with another value in a string:
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");

Use String replace() With a Regular Expression

Example
Use a case insensitive regular expression to replace Microsoft with W3Schools in a string:
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");
The result in res will be:
Visit W3Schools!

Using the RegExp Object

In JavaScript, the RegExp object is a regular expression object with predefined properties and
methods.

Using test()

The test() method is a RegExp expression method.

It searches a string for a pattern, and returns true or false, depending on the result.
The following example searches a string for the character "e":
Example
var patt = /e/;
patt.test("The best things in life are free!");
Since there is an "e" in the string, the output of the code above will be: true

You don't have to put the regular expression in a variable first. The two lines above can be
shortened to one:
/e/.test("The best things in life are free!");
Using exec()

The exec() method is a RegExp expression method.

It searches a string for a specified pattern, and returns the found text as an object.
If no match is found, it returns an empty (null) object.
The following example searches a string for the character "e":

Example 1 :/e/.exec("The best things in life are free!");

Rollover:
The keyword that is used to create rollover is the <onmousover> event. For example, we want to
create a rollover text that appears in a text area. The text “What is rollover?” appears when the
user place his or her mouse over the text area and the rollover text changes to “Rollover means
a webpage changes when the user moves his or her mouse over an object on the page” when the
user moves his or her mouse away from the text area. The HTML script is shown in example 1
Example 1
<HTML>
<head></head>
<Body>
<textarea rows=”2″ cols=”50″ name=”rollovertext” onmouseover=”this.value=’What is
rollover?'”
onmouseout=”this.value=’Rollover means a webpage changes when the user moves his or
her mouse over an object on the page'”>
</textarea>
</body>
</html>
Example 2
<p
onmouseover=”this.style.color=’red'”
onmouseout=”this.style.color=’blue'”>
Move the mouse over this text to change its color to red. Move the mouse away to
change the text color to blue.
</p>
Example 3
<html>
<head>
<title>Rollover Effect</title>
</head>
<body>
<table>
<tbody>
<tr valign=”top”>
<td width=”50″>
<a><img src=”vb2010book.jpg” name=”book”></a>
</td>
<td><img height=”1″ width=”10″></td>
<td><a onmouseover=”document.book.src=’vb2010book.jpg'”><b>Visual Basic 2010 Made
Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb2008book.jpg'”><b>Visual Basic 2008 Made
Easy</b></a>
<br>
<a onmouseover=”document.book.src=’vb6book.jpg'”><b>Visual Basic 6 Made Easy</b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Example 4
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script language=”Javascript”>
MyBooks=new Array(‘vb2010book.jpg’,’vb2008book.jpg’,’vb6book.jpg’)
book=0
function ShowCover(book){document.DisplayBook.src=MyBooks[book]
}</script></head>
<body>
<body>
<P align=”center”><img src=”vb2010book.jpg” name=”DisplayBook”/><p>
<center>
<table border=0>
<tr>
<td align=center><a onmouseover=”ShowCover(0)”><b>Visual Basic 2010 Made
Easy</b></a><br>
<a onmouseover=”ShowCover(1)”><b>Visual Basic 2008 Made Easy</b></a><br>
<a onmouseover=”ShowCover(2)”><b>Visual Basic 6 Made Easy</b></a><br>
</td>
</tr>
</table>
</body>
</html>
Frames:

The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).Since modern browsers
have implemented (almost) the same methods and properties for JavaScript interactivity, it is
often referred to, as methods and properties of the BOM.

The Window Object

The window object is supported by all browsers. It represents the browser's window. All global
JavaScript objects, functions, and variables automatically become members of the window
object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

window.document.getElementById("header");

is the same as:

document.getElementById("header");
Window Size

Two properties can be used to determine the size of the browser window.Both properties return
the sizes in pixels:

 window.innerHeight - the inner height of the browser window (in pixels)

 window.innerWidth - the inner width of the browser window (in pixels)

The browser window (the browser viewport) is NOT including toolbars and scrollbars.

For Internet Explorer 8, 7, 6, 5:

  document.documentElement.clientHeight
 document.documentElement.clientWidth

or

 document.body.clientHeight
 document.body.clientWidth

A practical JavaScript solution (covering all browsers):

Example
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;