Removing Leading and Trailing White Space

Here's another use for regular expressionsto trim leading or trailing white space. For example, I can match leading white space with the regular expression /^\s+/ and delete it with replace like this:

(Listing 20-14.html on the web site)

<HTML> 
    <HEAD> 
        <TITLE>Trimming Leading White Space</TITLE> 
        <SCRIPT LANGUAGE="JavaScript"> 
            <!--

function trimmer()


{


var regexp = /^\s+/


document.form1.text2.value =

document.form1.text1.value.replace(regexp, "") 
            } 
          //--> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Trimming Leading White Space</H1> 
        <FORM NAME="form1"> 
            <INPUT TYPE="TEXT" NAME="text1" VALUE="   JavaScript is the subject." 
            SIZE="30"> 
            <BR> 
            <INPUT TYPE="BUTTON" VALUE="Trim White Space" ONCLICK="trimmer()"> 
            <BR> 
            <INPUT TYPE="TEXT" NAME="text2" SIZE="30"> 
        </FORM> 
    </BODY> 
</HTML>

You can see the results of this code in Figure 20.11.

Figure 20.11. Trimming white space.

graphics/20fig11.gif

To trim trailing white space, you can use a regular expression like this:

(Listing 20-15.html on the web site)

<HTML> 
    <HEAD> 
        <TITLE>Trimming Trailing White Space</TITLE> 
        <SCRIPT LANGUAGE="JavaScript"> 
            <!--
            function trimmer() 
            {

var regexp = /\s+$/

document.form1.text2.value = document.form1.text1.value.replace(regexp,

"") 
          } 
          //--> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Trimming Trailing White Space</H1> 
        <FORM NAME="form1"> 
            <INPUT TYPE="TEXT" NAME="text1" VALUE="JavaScript is the subject.    "

SIZE="30"> 
            <BR> 
            <INPUT TYPE="BUTTON" VALUE="Trim White Space" ONCLICK="trimmer()"> 
            <BR> 
            <INPUT TYPE="TEXT" NAME="text2" SIZE="30"> 
        </FORM> 
    </BODY> 
</HTML>

That's all there is to it.

Regular Expression Objects

The regular expressions we've been using are actually treated as regular expression objects in JavaScript. There are two ways to create such objectsby just assigning a pattern to a variable (as we've been doing), or by explicitly creating a new regular expression object with the new operator:

var regexp = /pattern/[modifiers] 
var regexp = new RegExp("pattern",["modifiers"])

We've already seen that you can pass regular expression objects to methods such as match , or use the methods of such objects, such as exec . Let's take a more systematic look at regular expression objects now. You can find their properties and methods in Table 20.1 in overview, their properties in depth in Table 20.2, and their methods in overview in Table 20.3.

Table 20.1. The Properties and Methods of Regular Expression Objects

Properties	Methods
`constructor`	`compile`
`global`	`exec`
`ignoreCase`	`test`
`lastIndex`
`multiline`
`source`

Table 20.2. The Properties of Regular Expression Objects

Property	NS2	NS4	NS6	IE4	IE5	IE5.5	IE6
`constructor`		x	x	x		x	x
	Read-only
	This property specifies the function that creates an object.
`global`		x	x			x	x
	Read-only
	This property holds the Boolean setting of the `g` modifier.
`ignoreCase`		x	x			x	x
	Read-only
	This property holds the Boolean setting of the `i` modifier.
`lastIndex`		x	x			x	x
	Read/write
	This property holds the position where the next match begins in a searched string.
`multiline`		x	x			x	x
	Read-only
	This property holds a Boolean value indicating the state of the multiline modifier `m` used with a regular expression. The default is `false` .
`source`		x	x	x	x	x	x
	Read-only
	This property holds the text of the regular expression pattern itself.

Table 20.3. The Methods of Regular Expression Objects

Method	NS2	NS4	NS6	IE4	IE5	IE5.5	IE6
`compile`		x	x	x	x	x	x
	Returns: Regular expression object
	This method compiles a regular expression into an internal format for faster execution.
	Syntax: `regexp` `.compile(` `pattern` `, [` `modifiers` `])` ; where `pattern` is the regular expression pattern, and `modifiers` are the modifiers you want to use (such as "ig").
`exec`		x	x	x	x	x	x
	Returns: Array of matches
	Returns an array of matches to a regular expression, or null if there were no matches. If you're using parentheses for matches, the first element in the array is the entire match, and the subsequent elements are the submatches to the sections of the regular expression enclosed in parentheses.
	Syntax: `regexp` `.exec(` `string` `)` , where `string` is the text you want to work on. Note that the array returned by the `exec` method has three properties: `input` , `index` and `lastIndex.` The `input` property holds the searched string, the `index` property holds the position of the matched substring within the searched string, and the `lastIndex` property is the position following the last character in the match.
`test`		x	x	x	x	x	x
	Returns: Boolean
	Returns a Boolean value that indicates whether a pattern exists in a searched string.
	Syntax: `regexp` `.test(` `string` `)` , where `string` is the text you want to search. Returns true if there was a match, false otherwise .