This article will show you how to use Regular Expressions (Regex) to validate matching strings in JavaScript.
All user input collected in your applications should be validated. If an email address is required, a valid email address should be entered, or sending the email will fail. If a phone number is required, a valid phone number must be entered, and so on. Regex can be used for this validation by matching a whole string to a specified format.
Regex can also be used to search for text within a string, for a partial match, making it useful for find/replace or search operations.
As you will see below, however, regex can be quite difficult to write. Sometimes it makes more sense to just use someone else’s regex, or use software to generate the required expressions.
Regular Expressions (Regex)
Regular expressions (Regex) is a standard by which text can be searched for matching search patterns. Regex itself is a sequence of characters which defines a set of rules, or a search pattern which text is matched against.
Regex can be used to match all or part of a string. By matching a whole string, it can be used to validate user input. By matching parts of a string, it can be used to confirm whether a string contains a substring, or for searching strings for a specific value and finding where the search target appears.
Regex in JavaScript – How it Works
To use regex in JavaScript, you simply need to define the regex pattern you wish to match, then pass it to one of the built-in regex methods to see if the search pattern is matched by all or part of the string.
What do Regular Expressions Look Like?
Regular expressions are notoriously complex. A regular expression to validate an email address looks like this:
(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])
Yes, it really is that complex. So before you use regex, seriously consider whether your need to use regex. There are often easier ways to achieve the same thing – for example, many string methods for searching and replacing text, which accept regex as a parameter, will accept a simple string, which might be enough for your use case.
Chaining these methods to perform multiple replacements may also be more easier to code – and easier to read.
There are also other ways to validate and check input, such as using the correct HTML input type. Rather than validating an email with regex, you could use an email type input field – which can be validated by the web browser as an initial protection against bad input. Any validations performed on the front-end should also be checked on the back-end once your data is submitted.
Writing/Generating Regex Search Patterns
Regex is a pain to write. Nobody seems to enjoy working with regex. Though some extract satisfaction from writing regex, it is generally considered an exercise in frustration and is prone to mistakes – which can have a detrimental effect on production applications if a regular expression does not behave as intended.
The rules and syntax are quite hard to pick up, so beginners often struggle.
It is often more sensible to use a regex generator instead of hand writing your own search patterns. It’ll save you time in the early stages, and you’ll be able to see what working regex looks like and learn from it should you decide to start writing your own.
Additionally, for common use cases, online forums provide a good resource for pre-written regex search patterns for things like email addresses, phone numbers, postcodes, etc – just do an internet search for the regex pattern you want and you’ll probably find someone else has already written a pattern for it.
Defining Regular Expressions in JavaScript
The RegExp object is used to store regular expressions in JavaScript. The syntax for declaring a RegExp object is as follows:
var myRegExp = new RegExp('EXPRESSION');
Note that EXPRESSION here will be the regex you wish to validate your string against.
You can also define regex as an expression literal:
var myRegExp = /EXPRESSION/;
However, this is not the preferred method as it is harder to read, and the expression cannot be modified once created. Using the RegExp object is less ambiguous in purpose when you are reading and debugging your code. Using the RegExp object also means that you can store your expressions as strings and pass them to the constructor, adding flexibility.
By using the RegExp object, expressions could be stored as strings in a file or database, allowing you to maintain a list of expressions for re-use.
Using Regular Expressions in JavaScript
Below are the RegExp and String methods which can be used with regex to search and manipulate strings, with a code example for each.
The regex used in each example is deliberately simple, so that you can see how the function itself is used.
Search for a Match with exec()
The RegExp.exec() method searches for a match in a given string, returning an array or null if there is no result:
var myRegEx = RegExp('red');
var myString = 'blue green red purple';
console.log(myRegEx.exec(myString));
Above, we search for ‘red’ in the string, and log the result.
Test for a Full Match with test()
The RegExp.test() method tests for a match within the given string, returning TRUE or FALSE:
var myString = 'blue green red purple';
var myRegEx = new RegExp('red', 'g');
console.log(myRegEx.test(myString));
Note the use of the ‘g’ flag when initialising the RegExp object – this tells the regex to do a global search of the string.
Find all Matches with match() and matchAll()
The String.match() method returns an array of all matches in a string for the given regex. The below example finds all capital letters in the string:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log(myString.match(myRegEx));
The String.matchAll() method does the same thing, but returns an iterator:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('[A-Z]', 'g');
console.log([...myString.matchAll(myRegEx)]);
Note the use of spread syntax to expand the iterable into an array so that it can be printed using console.log().
Test for a Match in a String with search()
The String.search() method returns the index for a regex match in the string, or -1 if it is not found:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('quick', 'g');
console.log(myString.search(myRegEx));
Replace Text with replace()
The String.replace() method will replace the first match in the string. The original string will not be altered, so the result must be assigned to a new variable if it is to be used:
var myString = 'The quick brown fox jumps over the lazy dog in Hawaii';
var myRegEx = new RegExp('Hawaii', 'g');
console.log(myString.replace(myRegEx, 'New York'));
Note that if a string is passed as the search term rather than a RegExp object, only the first found occurrence will be replaced!
Replace all Matches with replaceAll()
The String.replaceAll() method will replace all occurrences of the match in the string – whether Regex or a string is used to define the search term:
var myString = 'The quick brown fox jumps over the lazy dog and ignores the other dog';
var myRegEx = new RegExp('dog', 'g');
console.log(myString.replaceAll(myRegEx, 'cat'));
Split a String into Substrings with split()
The String.split() method splits a string at a given point, which can be determined using Regex:
var myString = '1 dog, 4 parrots, 6 pigs';
var myRegEx = new RegExp('(,)');
console.log(myString.split(myRegEx));
Above, the string is split at the comma. Note the use of brackets in the regex expression – this means that the matches will be included in the result where they would usually be omitted by String.split().
An Easier Way?
If you are using regex to validate input, and are validating standardised formats (like email addresses and URLs), consider using a validation library instead. All of the hard work has been done for you, you simply need to pass your data on to the library and it will let you know whether the data is correctly or incorrectly formatted.
If you are searching text gathered from user input, a file, or a database, libraries also exist which are far easier to use, and far more powerful, than relying on regex. Some libraries allow you to search for exact matches, or fuzzy matches, allowing you to perform more broad and user-friendly searches.
That isn’t to say regular expressions should be avoided at all costs – when you need them, you need them – and the necessity, complexity and implementation will largely depend on what it is you are trying to build.
