Previous Example-|-Next Chapter's Examples-|-Return to Chapter Listing

Example 14.20:
More Regular Expression Examples

[This example works with Netscape Navigator 4. It won't work with Netscape Navigator 2 or 3, or Internet Explorer 3.]

Play around with these forms to see how regular expressions work. (Note that at the time of writing the i and g modifiers do not work correctly, but should be working in the released version of Navigator 4.) Rather than putting all the functions in the HEAD, we've grouped each function with the form with which it works. To see a reference table with the different special characters and modifiers, click here.

The match() method

Enter some text:

Enter a pattern (without "/" characters):     Modifiers (i, g, or both):

    Results:

Result length:

Outputs:

Memorized values:


The replace() method

Enter some text:

Input a pattern (without "/" characters):     Modifiers (i, g, or both):

What do you want to replace the matched text with?

    Results:

Result length:

Outputs:

Memorized values:


The split() method

Input some text:

Input a pattern (without "/" characters):

    Results:

Result length:

Outputs:

Memorized values:


Phone number extractor using match()


Phone number extractor using split()


Here are the scripts and forms: <H2> The match() method </H2> <SCRIPT> function clearForm(form) { form.results.value = "" form.outLen.value = "" form.out1.value = "" form.out2.value = "" form.out3.value = "" form.mem1.value = "" form.mem2.value = "" form.mem3.value = "" } function matchIt(form) { var p = new RegExp(form.patn.value, form.mods.value) clearForm(form) results = form.data.value.match(p) form.results.value = results if (results != null) { form.outLen.value = results.length form.out1.value = results[0] form.out2.value = results[1] form.out3.value = results[2] form.mem1.value = RegExp.$1 form.mem2.value = RegExp.$2 form.mem3.value = RegExp.$3 } } </SCRIPT> <FORM name="matchForm"> Enter some text: <INPUT type="text" name="data" size=80 value="This is a test. You can enter other text here."> <P> Enter a pattern (without "/" characters): <INPUT type="text" name="patn" size=32 value="\w+"> &nbsp;&nbsp;&nbsp;&nbsp;Modifiers (i, g, or both): <INPUT type="text" name="mods" size=2> <P> <INPUT type="button" Value="Do the match" onclick="matchIt(this.form)"> &nbsp;&nbsp;&nbsp;&nbsp;Results: <INPUT type="text" name="results" size=40> <P> Result length: <INPUT type="text" name="outLen" size=10> <P> Outputs: <INPUT type="text" name="out1" size=10> <INPUT type="text" name="out2" size=10> <INPUT type="text" name="out3" size=10> <P> Memorized values: <INPUT type="text" name="mem1" size=10> <INPUT type="text" name="mem2" size=10> <INPUT type="text" name="mem3" size=10> </FORM> <HR> <H2> The replace() method </H2> <SCRIPT> function replaceIt(form) { var p = new RegExp(form.patn.value, form.mods.value) clearForm(form) var results = form.data.value.replace(p, form.repvalue.value) form.results.value = results form.outLen.value = results.length form.out1.value = results[0] form.out2.value = results[1] form.out3.value = results[2] form.mem1.value = RegExp.$1 form.mem2.value = RegExp.$2 form.mem3.value = RegExp.$3 } </SCRIPT> <FORM name="replaceForm"> Enter some text: <INPUT type="text" name="data" size=80 value="This is a test string."> <P> Input a pattern (without "/" characters): <INPUT type="text" name="patn" size=32 value=""> &nbsp;&nbsp;&nbsp;&nbsp;Modifiers (i, g, or both): <INPUT type="text" name="mods" size=2> <P> What do you want to replace the matched text with? <INPUT type="text" name="repvalue" size=20> <P> <INPUT type="button" Value="Do the replace" onclick="replaceIt(this.form)"> &nbsp;&nbsp;&nbsp;&nbsp;Results: <INPUT type="text" name="results" size=72> <P> Result length: <INPUT type="text" name="outLen" size=10> <P> Outputs: <INPUT type="text" name="out1" size=10> <INPUT type="text" name="out2" size=10> <INPUT type="text" name="out3" size=10> <P> Memorized values: <INPUT type="text" name="mem1" size=10> <INPUT type="text" name="mem2" size=10> <INPUT type="text" name="mem3" size=10> </FORM> <HR> <H2> The split() method </H2> <SCRIPT> function splitIt(form) { var p = new RegExp(form.patn.value) clearForm(form) var results = form.data.value.split(p) form.results.value = results form.outLen.value = results.length form.out1.value = results[0] form.out2.value = results[1] form.out3.value = results[2] form.mem1.value = RegExp.$1 form.mem2.value = RegExp.$2 form.mem3.value = RegExp.$3 } </SCRIPT> <FORM name="splitForm"> Input some text: <INPUT type="text" name="data" size=80 value="This is another test. It is 9 words long."> <P> Input a pattern (without "/" characters): <INPUT type="text" name="patn" size=32 value="\s+"> <P> <INPUT type="button" Value="Do the split" onclick="splitIt(this.form)"> &nbsp;&nbsp;&nbsp;&nbsp;Results: <INPUT type="text" name="results" size=80> <P> Result length: <INPUT type="text" name="outLen" size=10> <P> Outputs: <INPUT type="text" name="out1" size=10> <INPUT type="text" name="out2" size=10> <INPUT type="text" name="out3" size=10> <P> Memorized values: <INPUT type="text" name="mem1" size=10> <INPUT type="text" name="mem2" size=10> <INPUT type="text" name="mem3" size=10> </FORM> <HR> <H2> Phone number extractor using match() </H2> <SCRIPT> function phoneNumber(form) { var s = form.data.value var num = new Array() var p = /(\d{3})\D*(\d{3})\D*(\d{4})/ num = s.match(p) alert("The phone number is " + num) } </SCRIPT> <FORM name="telnum"> <INPUT type="text" name="data" size=32> <INPUT type="button" value="Scan it" onclick="phoneNumber(this.form)"> </FORM> <HR> <H2> Phone number extractor using split() </H2> <SCRIPT> function flexNumber(form) { var s = form.data.value var num = new Array() var p = /\D+/ num = s.split(p) alert("The result is " + num) } </SCRIPT> <FORM name="longtelnum"> <INPUT type="text" name="data" size=32> <INPUT type="button" value="Scan it" onclick="flexNumber(this.form)"> </FORM>
Previous Example-|-Next Chapter's Examples-|-Return to Chapter Listing