2 of 56

What is Regular Expression?

A regular expression is very similar to a mathematical expression, except a regular expression tells the browser how to manipulate text rather than numbers by using special symbols as operators.

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 operation�

3 of 56

Syntax:

A regular expression could be defined with the RegExp () constructor, as follows −

var pattern = new RegExp(pattern, attributes);

or simply

var pattern = /pattern/attributes;

Where

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 multi-line matches, respectively.

4 of 56

Reg. Exp. Cont. :

Ex:

var patt = /kkwp/i;

/kkwp/i is a regular expression.

kkwp is a pattern (to be used in a search).

i is a attribute (modifies the search to be case-insensitive).

5 of 56

Language of Reg. Exp.:

By learning the language of a regular expression, you'll be able to make a browser understands it by manipulating any text entered into a form on your web page.
The words of the regular expression language are called special characters and act similarly to an operator in a mathematical expression.
Special characters tell the browser to perform an operation on text.
You can place any number of characters, numbers, or punctuation or symbols within the brackets, and the browser will determine whether they exist in the text

6 of 56

Language of Reg. Exp. Cont.:

If you want to search for a symbol that is also a special character, you must precede the symbol with a backslash (\), which is known as an escape character.
The backslash tells the browser to ignore the special meaning of the symbol.
Here's what you'd need to write to search for the ‘[‘ symbol in text.

7 of 56

Language of Reg. Exp. Cont.:

Ex: / [ \ [ ] /
Here's how the browser reads this regular expression:

1. The ‘/’ character tells the browser that this is the beginning of a regular expression.

2. The ‘[‘ character tells the browser to search the text for the following character(s).

3. The ‘\’ tells the browser to ignore the special meaning of the next character.

4. The ‘[‘ character is the character that the browser will search for in the text.

5. The ‘]’ character tells the browser that there are no more characters to search for.

6. The ‘/’ character tells the browser that this is the end of the regular expression.

8 of 56

Quantifiers:

The frequency or position of bracketed character sequences and single characters can be denoted by a special character.
Each special character has a specific connotation.
The +, *, ?, and $ flags all follow a character sequence.

9 of 56

Quantifiers Cont.:

Sr. No.	Expression	Description
1.	p+	It matches any string containing one or more p's.
2.	p*	It matches any string containing zero or more p's.
3.	p?	It matches any string containing at most one p.
4.	p{N}	It matches any string containing a sequence of N p's
5.	p{2,3}	It matches any string containing a sequence of two or three p's.
6.	p{2, }	It matches any string containing a sequence of at least two p's.
7.	p$	It matches any string with p at the end of it.
8.	^p	It matches any string with p at the beginning of it.

10 of 56

Example:

Sr. No.	Expression	Description
1.	[^a-zA-Z]	It matches any string not containing any of the characters ranging from a through z and A through Z.
2.	p.p	It matches any string containing p, followed by any character, in turn followed by another p.
3.	^.{2}$	It matches any string containing exactly two characters.
4.	<b>(.*)</b>	It matches any string enclosed within <b> and </b>.
5.	p(hp)*	It matches any string containing a p followed by zero or more instances of the sequence hp.

11 of 56

Literal Characters:

Sr. No.	Character	Description
1.	Alphanumeric	Itself
2.	\0	The NUL character (\u0000)
3.	\t	Tab (\u0009)
4.	\n	Newline (\u000A)
5.	\v	Vertical tab (\u000B)
6.	\f	Form feed (\u000C)
7.	\r	Carriage return (\u000D)
8.	\xnn	The Latin character specified by the hexadecimal number nn; for example, \x0A is the same as \n
9.	\uxxxx	The Unicode character specified by the hexadecimal number xxxx; for example, \u0009 is the same as \t
10.	\cX	The control character ^X; for example, \cJ is equivalent to the newline character \n

12 of 56

A metacharacter is simply an alphabetical character preceded by a backslash that acts to give the combination a special meaning.
For instance, you can search for a large sum of money using the '\d' metacharacter: /([\d]+)000/, Here \d will search for any string of numerical character.
The following table lists a set of metacharacters which can be used in PERL Style Regular Expressions.

Metacharacters:

13 of 56

Explanation:

Sr. No.	Character	Description
1.	.	a single character
2.	\s	a whitespace character (space, tab, newline)
3.	\S	non-whitespace character
4.	\d	a digit (0-9)
5.	\D	a non-digit
6.	\w	a word character (a-z, A-Z, 0-9, _)
7.	\W	a non-word character
8.	[\b]	a literal backspace (special case).
9.	[aeiou]	matches a single character in the given set
10.	[^aeiou]	matches a single character outside the given set
11.	(foo\|bar\|baz)	matches any of the alternatives specified

14 of 56

Sometimes a JavaScript application prohibits certain characters from appearing within text entered into a form, such as a hyphen (-).
You can direct the browser to 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:

/[ ^ \- ]/

In this case, the browser is asked to determine whether the text does not contain the hyphen.
The caret asks the browser to determine whether the following character(s) do not appear in the text.

Finding Nonmatching Characters:

15 of 56

Entering a Range of Characters:

Brackets ([]) have a special meaning when used in the context of regular expressions. They are used to find a range of characters.

Sr. No.	Expression	Description
1.	[...]	Any one character between the brackets.
2.	[^...]	Any one character not between the brackets.
3.	[0-9]	It matches any decimal digit from 0 through 9.
4.	[a-z]	It matches any character from lowercase a through lowercase z.
5.	[A-Z]	It matches any character from uppercase A through uppercase Z.

The ranges shown above are general; you could also use the range [0-3] to match any decimal digit ranging from 0 through 3, or the range [b-v] to match any lowercase character ranging from b through v

16 of 56

Matching Digits and Nondigits:

Limiting an entry either to digits or nondigits is a common task for many JavaScript applications.
For example, a telephone number entered by a user should be a series of digits, and a first name should be nondigits.
You can have the browser check to see whether the text has digits or nondigits by writing a regular expression.
The regular expression must contain either \d or \D, depending on whether you want the browser to search the text for digits (\d) or nondigits (\D).
/ \d / :This symbol, tells the browser to determine whether the text contains digits. The browser returns a true if at least one digit appears in the text.
/ \D /: This symbol is used to tell the browser to search for any nondigit in the text. This is illustrated next. The browser returns a true if a nondigit is found.

17 of 56

Matching Punctuation and Symbols:

The browser determine whether text contains or doesn't contain letters, punctuation, or symbols, such as the @ sign in an e-mail address
By using the \w and \W we can search special symbols in a regular expression.
The \w special symbol tells the browser to determine whether the text contains a letter, number, or an underscore.
The \W special symbol reverses this request by telling the browser to determine whether the text contains a character other than a letter, number, or underscore.
Ex: You can use the following regular expression to determine whether the product name that was entered into the form on your web page contains a symbol:
/ \W /: Using \W is equivalent to using [a-zA-Z0-9_].

18 of 56

Matching Words:

You might want the browser to search for a particular word within the text.
A word is defined by a word boundary that is, the space between two words.
You define a word boundary within a regular expression by using the \b special symbol.
The \b special symbol as a space between two words. You need to use two \b special symbols in a regular expression.
If you want the browser to search for a word: the first \b represents the space at the beginning of the word and the second represents the space at the end of the word.

19 of 56

Matching Words Cont.:

Ex: /\b Bob \b/:
You want to determine whether the name Bob appears in the text.
Since you don't want the browser to match just text that contains the series of letters B-o-b, such as Bobby, you'll need to use the word boundary to define Bob as a word and not simply a series of letters.

20 of 56

The test() method:

The regular expression can be test by using test() method.
Ex:

function RegExpression() {

var name='Bob'

re = /[bt]/

if (re.test(name))

{ alert('Found') }

else

{ alert('Not Found') }

}

</script>

21 of 56

Output:

A true is returned if either b or t or both are found in the name Bob; otherwise a false is returned.
Depending on this result, the appropriate alert dialog box is displayed on the screen.

The test() method Cont.:

22 of 56

Replace Text Using a Regular Expression:

The replace() method is used to replace portion of text.
It returns a modified string where the pattern is replaced.
Ex: /\b Bob \b/g

re = / \b Bob \b /

text = 'Hello, Bob and welcome to our web site.'

text = text.replace(re, 'Mary')

Placing ‘g’ at the end of the regular expression, which tells the browser to replace all occurrences of the regular expression in the string.

23 of 56

Replace Text Using a Regular Expression:

Create a regular expression that identifies portion of text that you want replaced.
Determine the replacement text. Pass both of these to the replace() method, and browser follows the direction given in the regular expression to locate the text.
If the text is found, the browser replaces it with the new text that you provided.
The next example tells the browser to replace Bob with Mary in the text.
The regular expression specifies the word Bob.
The replace() method of the string object is then called to use the regular expression to search for Bob within the text and then replace Bob with Mary.
However, the original string isn't modifi ed. The modifi ed string is returned by the replace() method.

24 of 56

Replacing Like Values:

A regular expression can be written to search for variations of a name and replace it with a standardized name.
To do this, the regular expression must contain literal characters and wildcard characters.
A literal character is a letter, number, or symbol that must match exactly within the text.
A wildcard is a special symbol that tells the browser to accept one or multiple unspecified characters as a match.
Two types of wildcards can be used: a period (.) and an asterisk (*).
The period tells the browser to match any single character, while the asterisk indicates zero or more occurrences of whatever precedes it.

25 of 56

Replacing Like Values Cont.:

Ex: The following matches Bob but not Bobby, because a single wildcard character is used:
/ Bob. /
However, this regular expression matches both Bob and Bobby because the multiple character wildcard is used:
/ Bob.* /

26 of 56

Return the Matched Characters:

Sometimes you need to retrieve characters that match a regular expression rather than simply testing whether those characters exist in the text or not.
You can have the browser return characters that match the pattern in your regular expression by calling the exec() method of the regular expression object.
The exec() method returns an array. The first array element contains the text that matches your regular expression.

27 of 56

Return the Matched Characters Cont.:

Ex: The following regular expression matches Bob and any word that begins with B-o-b.

/ \b Bob.* \b /

We'll need to do the following:

1. Create the regular expression object and assign it the regular expression: re = / \b Bob.* \b /

2. Call the exec() method, passing it the text and assigning the return value to an array variable. re = / \b Bob.* \b /

MyArray = re.exec('Hello, my name is Bobby.')

3. We then display the value of the first array element:

re = / \b Bob.* \b /

MyArray = re.exec('Hello, my name is Bobby.')

alert('Welcome, ' + MyArray[0]).

28 of 56

Symbols to remember for Regular Expression:

29 of 56

Reg.Exp. Properties:

Sr. No.	Reg. Exp. Object	Properties
1.	$1 (through $9)	Parenthesized substring matches
2.	$_	Same as input
3.	$*	Same as multiline
4.	$&	Same as last Match
5.	$+	Same as last Parenthesis
6.	$`	Same as left Context
7.	$'	Same as right Context
8.	constructor	Specifies the function that creates an object's prototype
9.	global	Search globally (g modifier in use)
10.	ignoreCase	Search case-insensitive (i modifier in use)
11.	input	The string to search if no string is passed

30 of 56

Reg.Exp. Properties Cont.:

Sr. No.	Reg. Exp. Object	Properties
12.	lastIndex	The index at which to start the next match
13.	lastMatch	The last match characters
14.	lastParen	The last parenthesized substring match
15.	leftContext	The substring to the left of the most recent match
16.	multiline	Whether strings are searched across multiple lines
17.	prototype	Allows the addition of properties to all objects
18.	rightContext	The substring to the right of the most recent match
19.	source	The regular expression pattern itself

31 of 56

Here is a list of the properties associated with RegExp and their description:
constructor: It returns a reference to the array function that created the instance's prototype.

Syntax

RegExp.constructor

Return Value

Returns the function that created this object's instance.

Reg.Exp. Properties:

32 of 56

Example:

<html>

<head>

<title>JavaScript RegExp constructor Property</title>

</head>

<body>

var re = new RegExp( "string" );

document.write("re.constructor is:" + re.constructor);

</script>

</body>

</html>

33 of 56

2. global: global is a read-only boolean property of

RegExp objects. It specifies whether a particular

regular expression performs global matching, i.e., whether it was created with the "g" attribute.

Syntax

RegExpObject.global

Return Value

Returns "TRUE" if the "g" modifier is set, "FALSE" otherwise.

RegExp Properties:

34 of 56

Example:

<html>

<body>

var re = new RegExp( "string" );

if ( re.global ) document.write("Test1 - Global property is set");

else document.write("Test1 - Global property is not set");

re = new RegExp( "string", "g" );

if ( re.global ) document.write("<br />Test2 - Global property is set");

else document.write("<br />Test2 - Global property is not set");

</script>

</body>

</html>

35 of 56

3. ignoreCase: ignoreCase is a read-only boolean property of RegExp objects. It specifies whether a particular regular expression performs case- insensitive matching, i.e., whether it was created with the "i" attribute.

Syntax

RegExpObject.ignoreCase

Return Value

Returns "TRUE" if the "i" modifier is set, "FALSE" otherwise.

RegExp Properties:

36 of 56

Example:

<html>

<body>

var re = new RegExp( "string" );

if ( re.global ) document.write("Test1 - Global property is set");

else document.write("Test1 - Global property is not set");

re = new RegExp( "string", "g" );

if ( re.global ) document.write("<br />Test2 - Global property is set");

else document.write("<br />Test2 - Global property is not set");

</script>

</body>

</html>

37 of 56

4. lastIndex: It is a read/write property of RegExp objects.

For regular expressions with the "g" attribute set, it contains an integer that specifies the character position immediately following the last match found by the RegExp.exec() and RegExp.test() methods.
This property allows you to call those methods repeatedly, to loop through all matches in a string and works only if the "g" modifier is set.
exec() and test() automatically reset the lastIndex to 0 when they fail to find a match (or another match).

Syntax: RegExpObject.lastIndex

Return Value

Returns an integer that specifies the character position immediately following the last match.

RegExp Properties:

38 of 56

Example:

<html>

<body>

var str = "Javascript is an interesting scripting language";

var re = new RegExp( "script", "g" );

re.test(str);

document.write("Test 1 - Current Index: " + re.lastIndex);

re.test(str);

document.write("<br />Test 2 - Current Index: " + re.lastIndex);

</script>

</body>

</html>

39 of 56

Many times a web page is distributed in number of sections.
Although this looked as though it were all contained on a single web page, actually multiple web pages appeared on the screen at the same time, and each was displayed in a frame.
Frames are created using HTML, but you can interact and manipulate frames using a JavaScript.

Frames:

40 of 56

All frames contain at least three web pages.
The first frame surrounds the other frames, and this entire collection is called the frameset.
The other frames are within the frameset, and each is referred to as a child.
The <frameset> HTML tag:
The frameset can be divided into columns and rows, depending on the needs of your application.
Columns divide the frameset vertically using the cols attribute of the <frameset> tag.
Rows divide the frameset horizontally using the rows attribute of the <frameset> tag.

Frames:

41 of 56

All frames contain at least three web pages.
The first frame surrounds the other frames, and this entire collection is called the frameset.
The other frames are within the frameset, and each is referred to as a child.
The <frameset> HTML tag:
The frameset can be divided into columns and rows, depending on the needs of your application.
Columns divide the frameset vertically using the cols attribute of the <frameset> tag.
Rows divide the frameset horizontally using the rows attribute of the <frameset> tag.

Frames:

42 of 56

The number of rows or columns that appear in a frameset is determined by the value assigned to these attributes.
Each column or row is represented by a percentage that indicates the percent of the frameset that is taken up by the column or row.
You can also specify a width and height—it doesn't have to be a percentage of the available window.
Ex: <frameset rows="50%,50%">
It divides the frame horizontally into two child windows evenly.

<frameset>:

43 of 56

After you define the frameset, you can insert a web page into each child window.
This can be done by using the <frame> HTML tag.
Each child window has its own <frame> tag.
You specify the web page that will be displayed in the child window by defining a value for the src attribute of the <frame> tag.
A unique name can also be specified for the child window by assigning the name to the name attribute of the <frame> tag
Ex: <frame src="WebPage1.html" name="topPage" />

<frame> tag:

44 of 56

You'll need to define a <frame> tag within the <frameset> tag for each child window contained in the <frameset> tag.
The first <frame> tag within the <frameset> tag refers to the upper left–most child window.
Subsequent <frame> tags refers to child windows that appear left to right, top to bottom within the <frameset> tag.

<frame> tag Cont.:

45 of 56

Ex:

<!—Dividing a Screen using <franeset>

<html>

</frameset>

</html>

<frame> tag Cont.:

46 of 56

It is possible to use frames by hiding the borders around the child windows within your frameset.
The border can be hidden by setting the frameborder and border attributes of the <frame> tag to zero (0).

Ex:

<html>

<frame src="WebPage1.html" name="topPage"

frameborder="0" border="0" />

<frame src="WebPage2.html" name="bottomPage"

frameborder="0" border="0" />

</frameset> </html>

Invisible Borders:

47 of 56

You can refer to another child window by referencing the frameset, which is the parent window.
Ex.

Calling a Child Window's JavaScript Function:

48 of 56

You can change the content of a child window from a JavaScript function by modifying the source web page for the child window.
To do this, you must assign the new source to the child window's href attribute.

Changing the Content of a Child Window:

49 of 56

The last child window that is created has the focus by default; however, you can give any child window the focus by changing the focus after all the web pages have loaded in their corresponding child windows.
You do this by calling the focus() method of the child window.
You can call the focus() method from a JavaScript function or directly in response to an event such as the onclick event.
The reference to parent bottomPage is needed to get past the security issues.
parent.bottomPage.focus();

Changing the Focus of a Child Window:

50 of 56

The content of a child window is a web page that exists on the web server.
However, you can dynamically create the content when you define the frameset by directly writing to the child window from a JavaScript

Writing to a Child Window:

51 of 56

You can access and change the value of elements of another child window by directly referencing the element from within your JavaScript.
You must explicitly specify the full path to the element in the JavaScript statement that references the element, and it must be from the same domain as the web page; otherwise, a security violation occurs.
parent.topPage.Form1.WebPage1.value='New Label'

Accessing Elements of Another Child Window:

52 of 56

Rollovers are used to make a web page alive, by altering its appearance as the visitor scans the contents of the web page with the mouse.
Any object on a web page can be changed with a rollover.
Rollovers are commonly used on product pages to display details about merchandise for sale online.

Rollover:

53 of 56

A rollover is caused by an event called onmouseover and occurs when a visitor to your web site moves the mouse over an object that appears on the page.
An object can be an image, text, or any element of a form.

Ex: <IMG height="92" src="7441805.gif" width="70"

border="0" onmouseover="src='0072253630.jpeg'">

Here, the original image is the 7441805.gif file. The new image is the 0072253630.jpeg file.
The onmouseover attribute is assigned the complete assignment statement (src='0072253630.jpeg'), which tells the browser to replace the 7441805.gif image with 0072253630.jpeg.

Creating Rollover:

54 of 56

you'll want to roll back, or reverse changes, of the onmouseover event when the visitor moves the cursor away from the object.
For example, you may want the original image to return to the screen after the mouse is moved away, replacing the image that was displayed when the onmouseover event occurred.
You can do this by reacting to the onmouseout event, which occurs whenever the mouse cursor is moved off an object.

Creating Rollback:

55 of 56

Multiple Actions for a Rollover:

56 of 56

An efficient way of handling rollovers is to load images into an array when your web page loads.
The browser loads each image once the first time the image is referenced in the web page.
Typically, the default setting for the browser is to check the browser cache for subsequent references for the image rather than download the image again from the web server.
Any delay in transmission is likely to be noticed by the visitor
You can reduce this delay by creating a JavaScript that loads all the images into memory once at the beginning of the JavaScript, where they can be quickly called upon as the onmouseover event occurs

More Efficient Rollovers: