JavaScript - RegExp




JavaScript - RegExp

A regular expression is an object that describes a pattern of characters. Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text.

Syntax

/pattern/modifiers;

Constructs a new RegExp for the specified pattern. See flags for acceptable flag values. RegExps can also be constructed using /pattern/flags syntax.

JavaScript’s regular expression flavor is part of the ECMA-262 standard for the language. This means your regular expressions should work exactly the same in all implementations of JavaScript. In the past there were many serious browser-specific issues. But modern browsers do a very good job of following the JavaScript standard for regular expressions. You only need to make sure your web pages have a doctype that requests the browser to use standards mode rather than quirks mode.

In JavaScript source code, a regular expression is written in the form of /pattern/modifiers where “pattern” is the regular expression itself, and “modifiers” are a series of characters indicating various options. The “modifiers” part is optional. This syntax is borrowed from Perl. JavaScript supports the following modifiers, a subset of those supported by Perl, /g enables “global” matching. When using the replace() method, specify this modifier to replace all matches, rather than only the first one. /i makes the regex match case insensitive. /m enables “multi-line mode”. In this mode, the caret and dollar match before and after newlines in the subject string.

If you need a refresher on how Regular Expressions work, check out our Interactive Tutorial first. Javascript supports regular expressions through the standard class RegExp which is implemented natively in every modern browser. While the common implementation isn't completely PCRE compatible, it supports the majority of use cases for regular expressions that you might require.

Creating JavaScript RegExp Object

Let's see how we can create a RegExp object in JavaScript -

// Object Syntax
let regExp = new RegExp("pattern", "flag");

// Literal Syntax
let regExp = /pattern/flag;

Where the pattern is the text of regular expression, the flag makes the regular expression search for a specific pattern. Note - In this tutorial, we will discuss the RegExp object, its properties and methods. All the examples will be based on the RegExp object, not the literal regular expression. We have covered the regex literal syntax earlier. We will be using the following String methods to use the RegExp object to test, match, and validate various string values in JavaScript - test() match() replace() exec(), Let's take a few examples to understand the use of the JavaScript RegExp object.

What is JavaScript RegExp

When you create a regular expression by calling the RegExp constructor function, the resulting object gets created at run time, rather than when the script is loaded. You should use the RegExp constructor function when you don’t know the value of the regular expression when you’re writing the script. For example, you may be asking the user to input a regular expression, or you may be getting the regular expression from an external source or calculating some part of the regular expression when the script runs. This program creates a regular expression using a random letter and then asks the user to type a sentence. When the user submits the form, the program calculates how many instances of the random letter were in the user-submitted text.

Regular expressions is a form of pattern matching that you can apply on textual content. Take for example the DOS wildcards ? and * which you can use when you're searching for a file. That is a kind of very limited subset of RegExp. For instance, if you want to find all files beginning with "fn", followed by 1 to 4 random characters, and ending with "ht.txt", you can't do that with the usual DOS wildcards. RegExp, on the other hand, could handle that and much more complicated patterns. Regular expressions are, in short, a way to effectively handle data, search and replace strings, and provide extended string handling. Often a regular expression can in itself provide string handling that other functionalities such as the built-in string methods and properties can only do if you use them in a complicated function or loop.

RegExp Syntax

There are two ways of defining regular expressions in JavaScript — one through an object constructor and one through a literal. The object can be changed at runtime, but the literal is compiled at load of the script, and provides better performance. The literal is the best to use with known regular expressions, while the constructor is better for dynamically constructed regular expressions such as those from user input. In almost all cases you can use either way to define a regular expression, and they will be handled in exactly the same way no matter how you declare them.

Javascript RegExp Examples

To check wether a string matches a pattern use RegExp.test()

var s = "abcdef";
var re = /abc.+/;

if(re.test(s))
    console.log("matches!");

Extracting Matches

To use capture groups you must not use RegExp.test() but String.match(). The resulting array will have one string for the entire match and one for each capture group.

var results = "abcdef".match(/bc(def)/);
console.log(results[0]);            # Gives "bcdef"
console.log(results[1]);            # Gives "def"

If a pattern doesn't match null is returned.

Replacing Patterns

To replace substrings by pattern just pass a regular expression to String.replace()

var result = "some  wild    spaces".replace(/\s+/, '');

To restructure a string using capture groups use backreferences in the target string like this

var result = "2018-02-01".replace(/(\d+)-(\d+)-(\d+)/, '$3.$2.$1');

Splitting by Regexp

Split into result array -

var results = s.split(/\s+/);         # e.g. split by whitespace separated columns

Reusing RegExp objects

To reuse expressions assign them to a variable or explicitely create an RegExp object like thi -

var re = /abc/;
var re = new RegExp("abc");

Using Regular Expressions in JavaScript

Regular expressions provide a powerful way to perform pattern matching on certain characters within strings of text. They offer a concise syntax to carry out complex tasks that otherwise would require lengthy code. Here is an example of a regular expression -

var regex = /^\d{2}$/;

A regular expression literal is specified in the form /pattern/modifiers, where "pattern" is the regular expression itself and the optional "modifiers" section specifies various options. The pattern portion above starts with an ^ indicating the beginning of a string. The \d indicates a digit followed by {2} meaning 2 consecutive digits. The $ indicates end of a string. So, this pattern will attempt to find exactly 2 consecutive digits from the beginning to the end of a string. In the next example we apply the pattern to the string "29". As expected it will find a match, whereas if we try this pattern against the string "3g8" it will not (please note that the test() method will be explained later in this section).

var regex = /^\d{2}$/;
var str1 = "29";
alert(regex.test(str1));     // => true   
var str2 = "3g8";
alert(regex.test(str2));     // => false  

You can add 3 possible modifiers to the regular expression: case-sensitivity (i), global searches (g), and multiline mode (m). These modifiers influence how the string is parsed. You can combine these by stringing them together, like so: /pattern/gim.

Let's look at the actual pattern in some more detail. A pattern can be simple or very complex. For example matching the string "Facebook" is as simple as /Facebook/, but matching emails, XML, or HTML tags can be rather complex. For example, an email pattern in which you test whether an input string is a valid email may look like this: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/. Regular expressions can be used for parsing, substitution, and format checking. They are often used in form validation, for example to validate an email or social security number. JavaScript's String type has 4 built-in methods: search(), replace(), split(), and match(), all of which accept regular expressions as an argument to help them perform their respective operations. When searching in a given string, you can specify the pattern you're looking for. Below we search for the first instance of a lower-case character [a-z] followed by one or more digits [0-9]+.

var str = "James Bond007";
var regex = /[a-z][0-9]+/;
alert(str.search(regex));   // => 9. the position of 'd' 

Example

var string = " Learn Javascript scripting language now ";  
         var result = new RegExp( "script", "g" );  
         var obj = result.test(string);  
         document.write("Matching and Return value : " +  obj);   

Output

Matching and Return value : true

Example

var string = " Learn Javascript scripting language now "  
 var  result1 = new RegExp( "pushing", "g" );  
         var obj1 = result1.test(string);  
         document.write("
Matching and Return value : " + obj1);

Output

Matching and Return value : false

The RepExp object is declared with a regular expression and its methods are applied to a content, either to check that the text matches the definition, or to extract parts of the text. Methods defined in the RepExp object may be involved with the instance or directly with a literal.

The parameter of the contructor is a regular expression mask

The RegExp constructor has two possible parameters, the regular expression in the form of string, and the modifier which is optional.

var x = new RegExp("expression" [, "modifier"])

The modifier is a letter or combination of "i", "g", "m" letters. The variable x is an instance of RegExp to which may be associated methods, and that can also be a parameter for some String functions.

The object is used by applying its methods to a content.

Once the instance of the object created, a method is associated to it, with for parameter the content that you want to parse with the regular expression.

var result = x.test("text");

An object can also be used as a parameter of some methods of the String object, including search, replace, match.

Example

var s = new String("hello");
var re = new RegExp("(o)+");
document.write(s.search(re));

Returns and displays the number 4, because "o" is in position 4 from zero.