Open Source For You — December 2017

76 | DECEMBER 2017 | OPEN SOURCE FOR YOU | http://www.OpenSourceForU.com

Developers Insight

var text =””;

text += x.elements[0].value;

text = text.replace(/I am/i,”We are”);

document.write(text);

}

</script>

</body>

</html>

Open the file regex4.html in a Web browser and you will

see a text box to enter data and a Submit button. If you enter

a string like ‘I am good’, you will see the output message ‘we

are good’ displayed on the Web page. Let us analyse the code

in detail to understand how it works. There is an HTML form

which contains the text box to enter data, with a button that,

when pressed, will call a JavaScript method called check( ).

The JavaScript code is placed inside the <script> tags. The

following line of code gets the elements in the HTML form:

var x = document.getElementById(“f1”);

In this case, there is only one element in the HTML form,

the text box. The following line of code reads the content of

the text box to the variable text:

text += x.elements[0].value;

The following line of code uses the replace( ) method to

test for a regular expression pattern and if a match is found,

the matched substring is replaced with the replacement string:

text = text.replace(/I am/i,”We are”);

In this case, the regular expression pattern is /I am/i and

the replacement string is We are. If you observe carefully, you

will see that the regular expression pattern is followed by an

‘i’. Well, we came across similar constructs throughout the

series. This ‘i’ is an example of a regular expression flag, and

this particular one instructs the regular expression engine to

perform a case-insensitive match. So, you will get a match

whether you enter ‘I AM’, ‘i am’ or even ‘i aM’.

There are other flags also like g, m, etc. The flag g will

result in a global match rather than stopping after the first

match. The flag m is used to enable the multi-line mode. Also

note the fact that the replace( ) method did not replace the

contents of the variable text; instead, it returned the modified

string, which then was explicitly stored in the variable text. The

following line of code writes the contents on to the Web page:

document.write(text);

Figure 3 shows the input for the script regex4.html and

Figure 4 shows the output.

A method called match( ) is also provided by the String

object for regular expression processing. Search( ) returns the

starting index of the matched substring, whereas the match( )

method returns the matched substring itself. What will happen

if we replace the line of code:

text = text.replace(/I am/i,”We are”);

...in regex4.html with the following code?

text = text.match(/\d+/);

If you open the file regex5.html having this modification,

enter the string article part 5 in the text box and press the

Submit button. You will see the number ‘5’ displayed on the

Web page. Here the regular expression pattern is /\d+/ which

matches for one or more occurrences of a decimal digit.

Another method provided by the String object for regular

expression processing is the split( ) method. This breaks the

string on which it was called into an array of substrings, using

the regular expression pattern as the separator. For example,

replace the line of code:

text = text.replace(/I am/i,”We are”);

...in regex4.html with the code:

text = text.split(“.”);

...to obtain regex6.html.

If you open the file regex6.html, enter the IPv4 address

192.100.50.10 in dotted-decimal notation on the text box and

press the Submit button. From then on, the IPv4 address will

be displayed as ‘192, 100, 50, 10’. The IPv4 address string is

split into substrings based on the separator ‘.’ (dot).

Figure 3: Input to regex4.html

Figure 4: Output of regex4.html