Many applications and programming languages have their own implementation of Regular expressions, often with slight and sometimes with significant differences from other implementations. When two applications use a different implementation of regular expressions, we say that they use different “regular expression flavors”.

 

Regular expression plays an important part in form validations. The input entered through forms needs to be validated before sending it to the server, so that correct data is transmitted. It is also widely used for search, replace and web crawling systems. If you want to write a selector engine (used to find elements in a DOM), it can be possible with the help of Regular Expressions.

 

Basic string matching

The simplest use of the Regular expression is to match some basic beginning-end patterns or some specific pattern anywhere in between the string.

 

Symbol: ^

Example: /^a/;

Explanation: The input string starts from a specific character(s) (here ‘a’).

 

Symbol: $

Example: /b$/;

Explanation: The input string ends with a specific character(s) (here ‘b’).

 

Symbol: ^ , $

Example: /^good$/;

Explanation: The input string starts from and ends with a specific character(s) (here ‘good’)

 

Symbol: . (period)

Example: /^good./;

Explanation: The input string starts with a specific character(s) and can contain any other single character, for example, ‘x’. The input string that matches with this RegEx could be ‘goodx’.

 

Symbol: +

Example: /^good.+/;

Explanation: The input string starts with a specific character(s) and can contain more than one character, for example ‘code’. The input string that matches with this RegEx could be ‘goodcode’.

 

Symbol: \

Example: /^go\.od$/;

Explanation: The input string allows an escaped character. Here the input string only matches with the string ‘go.od’, as the ‘.’ is escaped.

 

Symbol: ?

Example: /^good.+?b$/

Explanation: It’s optional for the input string to contain this character, it is accepted the either way. Here the strings ‘goodcode1b’ and ‘goodb’, both are accepted.

 

Group string matching

While basic Regular Expression syntax may give you desired results to some extent, but grouping makes it easier to match the input string in a range of characters.

 

Symbol: [abc]

Example: [good];

Explanation: The input string match any of the single character. An input string ‘go’ is accepted.

 

Symbol: [^abc]

Example: [^good];

Explanation: The input string shouldn’t match any of the single characters. An input string ‘abc’ is accepted.

 

Characters range

You can define a certain range of characters that can be allowed in an input string. This range can be for alphabets, numbers and special characters.

 

Symbol: [a-z]

Example: [d-s];

Explanation: It is used to specify the range for the small letters. The input string allows only the characters that lie in between this range. In this case, only the characters between d to s are allowed. Therefore, ‘good’ is allowed. That’s good!

 

Symbol: [A-Z]

Example: [X-Z];

Explanation: It is used to specify the range for the capital letters.

 

Symbol: [0-9]

Example: [3-7];

Explanation: It is used to specify the range for… you guessed it right, the Numbers.

 

Symbol: [a-zA-Z0-9]

Explanation: The characters that are allowed in an input string can be only alphabets(small and capital) and numbers(0-9).

 

Symbol: [.*?]

Explanation: Every character is accepted in the input string. Hence, ‘heisgood%#12’ is also accepted.

 

Specific Inputs

Sometimes you need just a particular set of input. For example, a link might only start with ‘http’ or ‘https’. Here’s how you do it.

 

Symbol: (abc|xyz )

Example: (http|https);

Explanation: Only the input strings having ‘http’ or ‘http’ will be allowed.

 

Symbol: {n}

Example: {3};

Explanation: Only n characters are allowed. Here n is a number, so for n=3, only 3 characters are allowed.

 

Symbol: {n, m}

Example: {4,10};

Explanation: Minimum ‘n’ characters and maximum ‘m’ characters are allowed. Therefore here, 4 characters minimum and 10 characters maximum are allowed.

 

Short form characters range

Alternatively, you can use certain symbols that are equivalent to Group string matching

 

Symbol: \d

Equivalent: [0-9]

Explanation: Any digit between this range.

 

Symbol: \D

Equivalent: [^0-9]

Explanation: Any non-digits.

 

Symbol: \w

Equivalent: [a-zA-Z0-9_]

Explanation: Any character whether it is an alphabet, number or underscore.

 

Symbol: \W

Equivalent: [^a-zA-Z0-9_]

Explanation: Not any alphabet, number or underscore.

 

Symbol: \s

Explanation: Whitespace character

 

Symbol: \S

Explanation: No any whitespace character.

 

How does Regular expression work?

Okay, so we have got our hands on symbols that form the patterns for matching and validating any input string. But, how do we use them?

First of all, we require a variable to hold the pattern.

var name = /^(\w{2, 20})\s ?(\w{2,20})?/;

 

Here, we are going to check if the first name and last name contains only alphabets. The {2,20} provides the minimum and maximum length for the first and last name. Did you noticed the ‘? symbol? It passes the string which doesn’t contain a space between the first name and last name or even the last name itself.

 

Now, using the function .test() we can check the validity of the input string. Let’s check these strings for the name Regex.

name.test(Steve Jobs); //Pass

name.test(Steve1) //Fail

name.test(SteveJobs) //Pass

 

Below is a good example of form validation through Jquery, where the validation in the input field has been done through the RegEx. Browse through the different tabs to find more.

[codepen_embed height=”371″ theme_id=”19055″ slug_hash=”zrWaQv” default_tab=”result” user=”devstreak”]See the Pen <a href=’http://codepen.io/devstreak/pen/zrWaQv/’>Jquery validation form</a> by Devstreak (<a href=’http://codepen.io/devstreak’>@devstreak</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

 

Conclusion

Regular expressions are so useful in computing that the various systems to specify Regexp have evolved to provide both a basic and extended standard for the grammar and syntax. Regexp processors are found in several search engines, search and replace dialogs of several word processors and text editors, and in the command lines of text processing utilities. As a web expert, you would probably find it in Javascript and other back-end programming languages such as PHP.

 

Do you find Regular expressions easy? Do share your thoughts and comments

Share on Facebook Tweet on Twitter Post on Google+ Buffer