JavaScript RegExp Object – Regular Expressions

A character pattern is what makes up a regular expression. The text uses the pattern to do “search-and-replace” operations that match patterns. Further, a RegExp Object in JavaScript is a pattern with properties and methods.

JavaScript RegExp Syntax

The syntax of the RegExp is:

/pattern/modifier(s);

or

var newPattern = new RegExp(pattern, modifier(s));

Parameters

The parameters are described in the following manner. The pattern is a string that specifies the regular expression’s or another regular expression’s pattern. Attributes are optional strings containing one of the “g”, “i” or “m” attributes, which, in turn, denote global, case-insensitive, or multi-line matches.

let text = "Visit codeunderscored";
let pattern = /codeunderscored/i;
let result = text.match(pattern);

console.log(result);

According to the example above, we draw the following conclusions:

• Codeunderscored – is the pattern we are searching for
• /codeunderscored/ – refers to the regular expression
• /codeunderscored/i – denotes a case-insensitive regular expression.

Generating regular expressions

A specific kind of object is a regular expression. It can be created using the RegExp constructor or by wrapping a pattern in forward slash (/) characters to create a literal value.

let varReOne = new RegExp("xyz");
let varReTwo = /xyz/;

The pattern represented by both of those regular expression objects is: a character followed by a b character and a c character. The standard restrictions for backslashes apply since the pattern is written as a regular string when using the RegExp constructor.

Backslashes are handled slightly differently in the second notation, where the pattern appears between slash characters. First, we must use a backslash before any forward slash that we wish to be a part of the pattern because a forward slash finishes the pattern. Backslashes that do not belong to special character codes, like \n, will also be maintained rather than ignored, as they are in strings, changing the pattern’s meaning.

In regular expressions, some symbols, such as question marks and plus signs, have particular meanings and backlashes have to proceed if they stand in for the actual symbol.

let resPlus = /twenty\+/;

Check for matches

There are numerous techniques for regular expression objects. The test is the simplest. If you give it a string to work with, it will respond with a Boolean, indicating if the string matches the pattern in the expression.

console.log(/xyz/.test("xyzde"));
// → true
console.log(/xyz/.test("abxde"));
// → false

That string of characters is easily represented by a regular expression made up only of nonspecial characters. The test returns true if the character xyz appears anywhere in the string we are testing against (not just at the beginning).

Browser Support

/regexp/ references an ECMAScript1 (ES1) feature. The latter is based on the 1997 JavaScript and is fully supported by all browsers.

Modifiers

Case-insensitive and global searches are carried out with the use of modifiers. Many accessible modifiers, such as case sensitivity, searching on multiple lines, etc., can make using regexps simpler.

• g – Perform a global match, i.e., discover every match rather than just the first one
• i – carry out a case-insensitive search
• m – Match several lines.

Brackets

The usage of brackets ([]) in the context of regular expressions has a specific significance. They are employed to locate various characters. As a result, to find a range of characters, use brackets:

• [abc] locate any character of your choice between the given brackets
• [^abc] Try locating a character that is not between the provided brackets
• [0-9] Locate any digit character between the brackets
• [a-z] Any lowercase letter, starting with a, through z, will match.
• [A-Z] – returns any uppercase character from A to Z that is compatible with it.
• [a-Z] -Any letter from lowercase A to uppercase Z is a match.
• [^0-9] It locates any non-digit character that is not available between the brackets
• (x|y) Find any of the suggested options.

In addition to the broad ranges listed above, you could also use the ranges [0-3] to match any decimal digit from 0 to 3 or [b-v] to match any lowercase character from b to v.

Metacharacters

Characters with a specific meaning are called metacharacters. Further, a metacharacter encompasses an alphabetical character that has a backslash before it to give the combination of characters a specific meaning. For instance, the ‘d’ metacharacter can be used to search for a significant amount of money: /([\d]+)000/,\d will look for any string of numeric characters in this case.

A list of a number of metacharacters used in regular expressions written in the PERL style is provided in the following table.

• . Responsible for finding a singular character. However, it doe not include a line terminator or newline
• \w When you want to locate a word character, you use \w
• \W the \W is useful in finding characters that are a non-word
• \d \d is useful when locating digits
• \D When the aim is to find a non-digit character, \D is vital
• \s Locates a character that is specifically a whitespace
• \S \S is important for finding characters that are not a whitespace
• \b Works both when you want a word to match either at the end or the beginning of a word. For example, use: \bCode at the beginning and: Code\b at the end.
• \B \B comes to play when finding matches that are not at the end or the beginning of a word
• \0 ideal for locating a NULL character
• \n responsible for finding a character for a new line
• \f When looking for a form feed character, \f is useful
• \r \r is a carriage return character
• \t A tab character can be found using \t
• \v \v is particularly employed to locate a character that is a vertical tab
• \xxx Search for the character indicated by the octal number xxx
• \xdd Locate the character indicated by the hexadecimal value dd
• \udddd Find the Unicode symbol represented by the hexadecimal value dddd

Quantifiers

A special character can indicate either the frequency or bracketed character sequences’ location and singular characters. In fact, all special characters have distinct meanings. The following flags +, *,?, and $ have a set pattern of characters, as we demonstrate below.

• n+ any string that contains at least one n is matched.
• n* Matches any string that has n occurring zero or more times.
• n? Matches any string that has n occurring either once or twice.
• n{X} Any string having a series of X n’s is matched.
• n{X, Y} Matches any string with an X to Y n’s sequence.
• n{X,} Matches any string with at least X n’s in a row.
• n$ each string that has n at the end of it is matched.
• ^n each string that has n at the start of it is matched.
• ?=n any string followed by a particular string n is matched.
• ?!n Any string that is not followed by a certain string n is matched.

Properties of RegExp objects

• Constructor- Returns the prototype of the function that created the RegExp object.
• Global – determines if the “g” modifier is present.
• ignoreCase – determines if the “i” modifier is present
• lastIndex – specifies the index at which the following match will begin.
• multiline – determines if the “m” modifier is present
• source returns the RegExp pattern’s text.

Object Methods for RegExp

• compile() Compiles a regular expression. Version 1.5 is marked as deprecated.
• exec() seeks a match within a string and brings back the first match
• test() seeks a match within a string and brings back true or false.
• toString() returns the regular expression’s string value.

Example: Validating the Phone Number

// app for verifying the phone number

function validatePhone(val) {

    // regex pattern for phone number
    const regex = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/g;

    // verifying if the provided phone number is valid
    let rsValue = val.match(regex);
    if (rsValue) {
        console.log('The number is legitimate.');
    }
    else {
        let val = prompt('Input the number following the format XXX-XXX-XXXX:');
        validatePhone(val);
    }
}

// fetch user input
let nums = prompt('Input a new number XXX-XXX-XXXX');

validatePhone(nums);

Example: Regular Expressions

const string = 'Find code';
const pattern = /code/;

// Check the string variable to see if the pattern is there.
const varResultOne = string.search(pattern);
console.log(varResultOne); // 5

//swap out the character for a different one
const varStringOne = 'Find code';
varStringOne.replace(pattern, 'pick program'); // Find  pick program

// dividing strings into elements of an array
const varRegex1 = /[\s,]+/;
const varResultTwo = 'Code scored! '.split(varRegex1);
console.log(varResultTwo); // ['Code', 'scored!', '']

// using the phone number pattern to search
const varRegex = /(\d{3})\D(\d{3})-(\d{4})/g;
const varResultThree = varRegex.exec('Code contact number is: 352 323-3567.');
console.log(varResultThree); // ["352 323-3567", "352", "323", "3567"]

Example: Regular Expression Modifier

const varString = 'Code code code';

// performing a replacement
const varResult = varString.replace(/code/, 'under');
console.log(varResult); // Code under code

// performing global replacement
const varResultTwo = varString.replace(/code/g, 'under');
console.log(varResultTwo); // Code under under

// performing case-insensitive replacement
const varResultThree = varString.replace(/code/i, 'under');
console.log(varResultThree); // under code code

// performing global case-insensitive replacement
const varResultFour = varResultThree.replace(/code/gi, 'under');
console.log(varResultFour); // code code code

Example: Validating the Email Address

// program to verify the email address

function emailValidation(val_email) {

    // email regex pattern
    const re = /\S+@\S+\.\S+/g;

    // Verify the validity of the email
    let resVal = re.test(val_email);
    if (resVal) {
        console.log('The val_email is valid.');
    }
    else {
        let isEmailValid = prompt('Please input a valid email:');
        validateEmail(isEmailValid);
    }
}

// take input
let varEmail = prompt('Please input a valid email: ');

validateEmail(varEmail);

Conclusion

A regular expression can describe a character pattern. The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods that apply regular expressions to text to perform robust pattern matching and search and replace operations.