Open Source For You — December 2017

(Steven Felgate) #1
http://www.OpenSourceForU.com | OPEN SOURCE FOR YOU | DECEMBER 2017 | 75

Insight Developers

is the same as that of regex1.html. The next few lines of code
involve an if-else block. The following line of code uses the
search( ) method provided by the String object:

if(str.search(pat) != -1)

The search( ) method takes a regular-expression pattern as
an argument, and returns either the position of the start of the
first matching substring or −1 if there is no match. If a match is
found, the following line of code inside the if block prints the
message ‘MATCH FOUND’ in bold:

document.write(‘<b>MATCH FOUND</b>’);

Otherwise, the following line of code inside the else block
prints the message ‘NO MATCH’ in bold:

document.write(‘<b>NO MATCH</b>’);

Remember the search( ) method searches for a substring
match and not for a complete word. This is the reason why the
script reports ‘Match found’. If you are interested in a literal
search for the word Java, then replace the line of code:

var pat = /Java/;

...with:

var pat = /\sJava\s/;

The script with this modification regex3.html is also
available for downloading. The notation \s is used to denote
a whitespace; this pattern makes sure that the word Java is
present in the string and not just as a substring in words like
JavaScript, Javanese, etc. If you open the script regex3.html
in a Web browser, you will see the message ‘NO MATCH’
displayed on the Web page.

Methods for pattern matching
In the last section, we had seen the search( ) method provided
by the String object. The String object also provides three other
methods for regular expression processing. The methods are
replace( ), match( ) and split( ). Consider the script regex4.html
shown below which uses the method replace( ):

<html>
<body>
<form id=”f1”>
ENTER TEXT HERE: <input type=”text” name=”data” >
</form>
<button onclick=”check( )”>CLICK</button>
<script>
function check( ) {
var x = document.getElementById(“f1”);

regular expressions in C++ you will come across some
subtle differences between PCRE and the ECMAScript style
of regular expressions. JavaScript also uses ECMAScript
style regular expressions. JavaScript’s support for regular
expressions is built-in and is available for direct use. Since we
have already dealt with the syntax of the ECMAScript style
of regular expressions, we can directly work with a simple
JavaScript file containing regular expressions.


JavaScript with regular expressions
Consider the script called regex1.html shown below. To save
some space I have only shown the JavaScript portion of
the script and not the HTML code. But the complete file is
available for download.



Open the file regex1.html in any Web browser and you
will see the message ‘Match Found’ displayed on the Web
page in bold text. Well, this is an anomaly, since we did not
expect a match. So, now let us go through the JavaScript code
in detail to find out what happened. The following line of code
stores a string in the variable str:


var str = “Working with JavaScript”;


The line of code shown below creates a regular expression
pattern and stores it in the variable pat:


var pat = /Java/;


The regular expression patterns are specified as characters
within a pair of forward slash ( / ) characters. Here, the regular
expression pattern specifies the word Java. The RegExp object
is used to specify regular expression patterns in JavaScript.
This regular expression can also be defined with the RegExp( )
constructor using the following line of code:


var pat = new RegExp(“Java”);


This is instead of the line of code:

var pat = /Java/;


A script called regex2.html with this modification is
available for download. The output for the script regex2.html

Free download pdf