We have observed that many JavaScript users don’t know how to use Regular Expression in JavaScript. So, we have prepared this blog specially for those who face problem while using Regular Expression in JavaScript. So, in this blog I’m going to share a complete presentation of the Regular Expression in JavaScript.
An Introduction to Regular Expression
A Regular Expression or RegExp is considered as an object in JavaScript language and it defines a pattern of characters. With the use of Regular Expression, a user can define a pattern of specified characters to match in any string. You don’t need to write ton of coding. It saves your time as well as energy. It is a special object which is using by almost all the programming languages of the world.
RegExp comes with some kind of methods which are based on different need like search, replace and test to validate any field. RegExp can be used in many aspects like “form validation”, “string checking” and some kind of testing purposes. But It is most helpful in form validation, without RegExp a Form validation is incomplete. For example, if we are not using RegExp to validate the form then we will be only able to validate some fields except “email field”, “zip code field” and “debit card number” etc.
Therefore, if you are going to validate each and everything very strictly then you must take help of Regular Expression.
Syntax
A Regular Expression may be defined in two ways, either with the RegExp () constructor or in a way of pattern which as follows –
var pattern = new RegExp(pattern, attributes); or simply var pattern = /pattern/attributes;
Now, I am going to define the use of Brackets, Quantifiers, Metacharacters, and RegExp method. I will explain all of these in brief one by one which will be very helpful for a user when using Regular Expression.
Brackets
Here, every bracket has a special meaning when it is used in RegExp. Brackets play an important role in RegExp behavior and are used to find a range of characters.
1. [abc]
Any one character between the brackets.
2. [^abc]
Any one character not between the brackets.
3. [0-9]
Any one decimal digit between the brackets from 0 to 9.
4. [a-z]
Any character from lowercase a through lowercase z.
5. [A-Z]
Any character from uppercase A through uppercase Z.
6. [a-Z]
Any character from lowercase a through uppercase Z.
7. [x|y]
It is used to find any of the alternative specified.
Quantifiers
Quantifiers are useful when a user wants a character in a specified frequency or on specified position. RegExp has listed some of quantifiers to make matching and replacing more powerful.
1. p+
It maches any string containing one or more p’s.
2. p+
It maches any string containing zero or more p’s.
3. p+
It also looks any string containing at most one p.
4. p{2,3}
It checks any string containing a sequence of two or three p’s.
5. p{2,}
It checks any string containing a sequence of at least two p’s.
6. p$
It matches any string with p at the end of it.
7. ^p
It matches any string with p at the beginning of it.
Metacharacters
A metacharacter is a combination of an alphabetical character and backslash(\) and here alphabetical character preceded by a backslash(\). There are some character those have different meaning and work but always preceded by backslash(\). Following are some metacharacters which are usually used in RegExp. Let’s have a look.
1. .
It’s a single character.
2. \s
It’s a whitespace character (newline, space, tab).
3. \S
It’s a non-whitespace character.
4. \d
It’s a digit character(0-9).
5. \D
It’s a non-digit character.
6. \w
It’s a word character (a-z, A-Z, 0-9, _).
7. \W
It’s a non-word character.
8. [\b]
It’s a literal backspace(special case).
9. [aeiou]
It matches a single character in the given set.
10.[^aeiou]
It matches a single character outside the given set.
RegExp Methods
1. exec()
It executes a search for a match in its string parameter.
2. test()
It Tests for a match in its string parameter.
An Example of Regular Expression Using Form
/*----HTML---- */
<form name=”myform” onsubmit="return creditCardValidation()" action=”javascript:alert('ready to submit')” >
<label>Credit Card Number:</label>
<input type=”number” name=”creditCardNum” />
<p id="numError"></p>
<input type=”submit” value=”submit” />
</form>
/*----HTML---- */
/*----JS Code---- */
function creditCardValidation() {
var getCreditNum = document.myform.creditCardNum.value;
var check16digit = /^\d{16}$/;
if ( !check16digit.test(getCreditNum) ) {
document.getElementById('numError').innerHTML = "Please enter ur 16 digit Credit card number";
return false
}
}
/*----JS Code---- */
Firstly in HTML code, I have created a form with a form tag and inside which I have created <label>, <input> and <p> tags. I have given id=”myform” to form tag and also created an event onsubmit=”return creditCardValidation()” then coming to the rest of the tags I have put name=”creditCardNum” to <input> tag that will fetch the value of this tag by JavaScript function and I have also created a id=”numError” in <p> tag that will show error when user submit the form after entering the debit card number. So let’s see how it has been programmed in JavaScript.
In JavaScript, I have created a function called creditCardValidation() inside this I have created two variable named getCreditNum and check16digit. Now, getCreditNum is for getting the value of <input> tag and check16digit is just to check whether user will enter correct detail and not. Further I have used if else condition that shows if user enters wrong details then it will pass a message “Please enter ur 16 digit Credit card number” to a var named “error” and if user enters correct details then form will be submitted.
But, to show the message on giving wrong details we have to pass it to innerHTML to “numerror” id that has been done at the last in the function with return false.
I really hope, that my efforts will provide you a productive result. And you’ve understood that how to use Regular Expressions in JavaScript. If you want to suggest something, anything which I weren’t mention here. Feel free to share your thought with us in the below given discussion section.