punjabi revolution tutorial Javascript regular expression part 1

Regular expressions are a smart way to validate the given input according to some predefined patterns. If we do not used the regular expressions, we may have to write many lines of code to validate a single input. For example, if a field contains identity card number and the format of the number xxxxx-xxxxxxx-x, where x may be any digit. we can write a simple regular expression as /^[0-9]{5}-[0-9]{7}-[0-9]{1}$/.

Now let’s start it step by step. The pattern of regular expression in JavaScript is enclosed by forward slash /. let’s start with a simple example.

In above code, we define two HTML elements, a text field and a button. when the button is clicked, the the click event is captured by the input tag attribue onclick which in turn calls the function validate(). The function validate is defined in JavaScript within <script></script> tag. In validate() function we apply our logic to validate the input.

Line 6: we get the text value of the input text field by using document.getElementById(“x”).value.

Line 8: The pattern for the regular expression is written with forward slash. for now, the pattern is very easy one. It says, it would try to find the word pakistan anywhere in the input.

Line 9: We use a predefined JavaScript function search() to find the pattern in the string. This function search the string for the given pattern. In this case, it would return the index of the first occurrence if the pattern is matched, otherwise, it would return -1.

Line 10: Here, if there is no match, we show the red color message right beside the input text field. To achieve this, we use the <span> tag. The span tag is similar to div tag. we can also use div here. The difference between the two is that div is block tag while span is an inline tag.  Normally we use the span element to place some HTML on the fly. Here we use the innerHTML attribute to place the HTML code inside <span> tag. So if the pattern is not found, the red colored “invalid” message would be shown and otherwise green colored “valid” message would be shown.

So this was a very simple example to match word pattern in a given input. let’s make little more useful. suppose the client’s requirement is changed a little so that the new condition is that the pattern should occur only in start. To achieve , we would add a caret letter in start like /^pakistan/. Now the input would be correct only it starts with the word pakistan with no concern of what follows it.  Technically speaking, it makes sure that the matching of the pattern starts right from the beginning and it matches every letter from the beginning with every letter of the given pattern.

Let’s make a little more modification to the pattern, suppose the requirement says that the input should always end with the word pakistan. now in this case the value pattern would  be /pakistan$/. Technically speaking, now the matching would start from end and it would start matching with one to one mapping from the end.

What if we use both caret sign in start and dollar sign at the end like /^pakistan$/?

Technically, it means that pattern matching start in parallel both from beginning and from end. But what it would mean at the end is very simple. it would make sure the given input contains just the text according the given pattern and no other character is allowed. I more simplified way, it means that the input matches with the pattern both in contents and in length. nothing extra is allowed. Here is the modified code, please run it and verify the results as discussed.

Should you have any question/confusion, you can write in the comments are below.

Cheers 🙂

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *