This chapter is from the book

This chapter is from the book

In Chapter 2, "Details of the Language," you were given a quick overview of the core JavaScript language to show you differences and similarities to other computer languages. Now it is time to go to the next level by examining some of the features of the JavaScript language and programming techniques that will make your JavaScript programs more powerful and more resilient to errors and maybe even make you say, "Wow, I didn't know JavaScript could do that!"

In this chapter we will look at pattern matching and event handling and show you how to use these two pieces of JavaScript functionality to make your JavaScript programs more powerful. This chapter will also examine two programming techniques that will make your JavaScript programs less error prone. You will be introduced to the try...catch block and shown how to use it. You will also be introduced to some free JavaScript debugging programs and techniques.

Pattern Matching

Two of the most common uses of Web pages today are for gathering and distributing data. These two areas, by nature, use data manipulation to understand what the user needs and then return information tailored to the user's specifications. One of the key tools for processing data is pattern matching. Some scripting languages, such as Perl, are well suited to handle pattern matching, whereas others provide very little pattern matching capabilities. If you are familiar with Perl, you will probably recognize JavaScript pattern matching because it was based on Perl's implementation of pattern matching. The implementation of pattern matching into JavaScript greatly aids in the processing of data for the Internet.

JavaScript uses the RegExp (short for Regular Expression) object to handle pattern matching. This object holds the pattern definition, as well as provides methods for performing matching. You'll begin by learning how to define patterns and then by learning how to use the RegExp objects to test for pattern matches.

Defining the RegExp Object

The RegExp object can be created in two different ways, which are similar to defining strings. The first way is to use the RegExp constructor and the keyword new:

var lastName = new RegExp("Jones");

This notation creates a new RegExp object called lastNameand assigns the pattern Jones. The same functionality could have been accomplished by using a direct assignment:

var lastName = /Jones/;

To differentiate this notation from that used to define strings, the forward slash character (/) is used to designate the beginning and end of the pattern. Notice that forward slashes were not needed in the RegExp() constructor because this could be distinguished from the String() constructor.

Defining Patterns

The syntax used to define patterns in JavaScript could be considered a scripting language in itself because it is so extensive. There are special characters for creating almost any pattern one could imagine, including characters for handling groups, repetition, position, and so on. Table 3.1 shows the special pattern matching characters available in JavaScript.

Matches the same characters that resulted from the subpattern in group
number x. Groups, which are designated with parentheses, are
numbered from left to right.

^

Matches the beginning of the string or beginning of a line, in multiline
matches.

$

Matches the end of the string or end of a line, in multiline matches.

\b

Matches the position between a word character and a non-word character.

\B

Matches the position that is not between a word character and a non-word
character.

These special pattern matching characters are used within the pattern to aid in defining complex patterns. Looking at Table 3.1, you might notice that characters such as the asterisk (*), plus sign (+), and backslash (\) hold special meanings that would keep them from being used as a literal. For example, what if you wanted to find all the plus signs (+) in a string? To use a literal plus sign, a backslash (\) must precede the sign. Table 3.2 shows all the characters that require a backslash character to be taken literally within a pattern.

Table 3.2 Literal Characters

Character

Description

\f

Form feed

\n

Newline

\r

Carriage return

\t

Tab

\v

Vertical tab

\/

Forward slash (/)

\\

Backward slash (\)

\.

Period (.)

\*

Asterisk (*)

\+

Plus (+)

\?

Question Mark (?)

\|

Horizontal bar (|)

\(

Left parenthesis (

\)

Right parenthesis )

\[

Left bracket ([)

\]

Right bracket (])

\{

Left curly brace ({)

\}

Right curly brace (})

\XXX

ASCII character represented by the octal number XXX

\xHH

ASCII character represented by the hexadecimal number HH

\cX

The control character represented by X

There is one final piece of syntax that JavaScript provides for creating patterns. Unlike the syntax covered so far, these pieces of syntax appear outside the forward slashes that define the pattern. These attributes are shown in Table 3.3.

Table 3.3 Pattern Attributes

Character

Description

g

Global match. Finds all possible matches.

i

Makes matching not case sensitive.

Testing for Pattern Matches

When a pattern has been defined, it can be applied to a string by using special methods that exist in the RegExp and String objects. The pattern matching methods in the String object require RegExp objects, as shown in Table 3.4.

Table 3.4 Pattern Matching Methods in the String Object

Method

Description

match(regExpObj)

Searches for regExpObj pattern in string and returns
result.

replace(reqExpObj,str)

Replaces all occurrences of the regExpObj pattern with
str.

search(reqExpObj)

Returns the position of matching regExpObj pattern within
the string.

split(regExpObj,max)

The string is split everywhere there is a matching regExpObj
pattern up to max splits. The substrings are returned in an array.

The pattern matching methods in the RegExp object require String objects, as shown in Table 3.5.

Table 3.5 Pattern Matching Methods in the RegExp Object

Method

Description

exec(str)

Searches for pattern in strand returns result

test(str)

Searches for pattern in str and returns true
if match found, otherwise false is returned

(str)

Same as exec(str) method

Listing 3.1 uses the RegExp constructor, special pattern syntax, and
the String replace() method to replace digits 3 to 5 that exist in
the string with nines as seen in Figure
3.1.