Learn the Basics of RegEx in JavaScript

In JavaScript, regular expressions (RegEx) can be used to match strings or parts of strings. To create a regular expression, you can use the RegEx constructor or the literal notation (/pattern/flags).

View This On YouTube

Using the RegExp Constructor

let pattern = new RegExp("hello");
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

Using the Literal Notation

let pattern = /hello/;
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

In addition to the test() method, you can use other methods such as exec(), match(), search(), and replace() to work with regular expressions.

Using match() Method

let pattern = /\d+/g;
let input = "I have 5 apples and 2 oranges.";
let result = input.match(pattern); // ["5", "2"]
console.log(result);

RegEx Flags

You can also use flags to modify the behavior of the regular expression. Some common flags include g (global), i (case-insensitive), and m (multiline).

Here is an example of using the i flag:

let pattern = /hello/i;
let input = "Hello World";
let result = pattern.test(input); // true
console.log(result);

In this example, the i flag makes the regular expression case-insensitive, so it matches Hello as well as hello.

Patterns and What They Mean

What does pattern /\d+/g mean in my third example?

The regular expression /\d+/g is made up of three parts: the forward slashes (/), the pattern \d+, and the flag g.

• The forward slashes / define the start and end of the regular expression.
• The pattern \d+ is a character set that matches one or more digits. The \d shorthand character is set for any digit (0-9), and the + quantifier specifies that one or more of the preceding elements must be present. So, it will match one or more digits together.
• The flag g stands for global, which means it will find all matches rather than stopping after the first match. Without this flag, the regular expression would only return the first match.

So, the regular expression /\d+/g matches one or more digits together and returns all occurrences of that match in the input string.

In the third example code, it will match all digits in the input string.

What About String ReGex Using Expressions?

In JavaScript, you can also use regular expressions with string methods such as match(), search(), replace(), and split(). These methods allow you to work with strings in a more powerful way, using the pattern-matching capabilities of regular expressions.

match() Method

let input = "Hello World";
let result = input.match(/world/i); // ['World', index: 6, input: 'Hello World', groups: undefined]
console.log(result);

In this example, the match() method searches the input string for the first occurrence of the pattern world, case-insensitive. It returns an array containing the matched string.

replace() Method

let input = "Hello World";
let result = input.replace(/world/i, "javascript"); // "Hello javascript"
console.log(result);

In this example, the replace() method searches the input string for the first occurrence of the pattern world, case-insensitive, and replaces it with "javascript".

search() Method

let input = "Hello World";
let result = input.search(/world/i); // 6
console.log(result);

In this example, the search() method searches the input string for the first occurrence of the pattern world, case-insensitive. It returns the index of the first character of the matched string.

split() Method

let input = "Hello World";
let result = input.split(/\s+/); // ["Hello", "World"]
console.log(result);

In this example, the split() method splits the input string into an array of substrings, using the pattern \s+ (one or more whitespaces) as the separator.

You can also pass the regular expression object to these methods instead of a string representation of the pattern. For example, you can reference how it was done in the third example.

Getting Domain Variables From a String

This regex is very helpful if you are creating your own single-page application router. You may have seen it in my other tutorials or even in my other videos.

To get the domain from a string using a regular expression, you can use the match() method along with a regular expression pattern that captures the domain part of a URL. Here's an example of how you can do this:

let input = "https://thedevdrawer.com/path?query=value#hashtag";
let pattern = /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/im;
let result = input.match(pattern);
console.log(result[0]); // https://thedevdrawer.com
console.log(result[1]); // thedevdrawer.com

In this example, the regular expression pattern is as follows:

• ^ matches the start of the string
• (?:https?:\/\/)? matches the optional "http://" or "https://" protocol, the ? quantifier makes this group optional
• (?:[^@\/\n]+@)? matches the optional username and "@" symbol, which typically comes before the domain in a URL. The ? quantifier makes this group optional
• (?:www\.)? matches the optional "www." subdomain, the ? quantifier makes this group optional
• ([^:\/?\n]+) matches one or more characters that are not ":", "/", "?", or a newline, and captures the domain name.
• /im are the flags, i for case-insensitive and m for multiline

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, the domain is captured in the first group (result[1]) of the returned array.

In this example the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be "https://thedevdrawer.com" at index 0 and "thedevdrawer.com" at index 1.

Get The Query and Hash

To get the query and hash from a URL using a regular expression, you can use the match() method along with separate regular expression patterns for each part. Here's an example of how you can do this:

let queryPattern = /\?([^#]*)/
let hasOnlyPattern = /#(.*)/
let query = input.match(queryPattern)[1]
let hash = input.match(hasOnlyPattern)[1]
console.log(query)
console.log(hash)

In this example, we use two regular expression patterns:

• /\?([^#]*)/ uses [^#]* to match any character except the '#' symbol, and captures everything after the question mark up until the '#' symbol (if any).
• /#(.*)/ matches the hash symbol followed by zero or more characters .*, and captures everything after the hash. The parentheses () around .* create a capturing group that allows us to extract just the hash fragment.

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, we extract the captured group at index 1 (the second item in the array) to get just the query string and hash fragment.

In this example, the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be:

query: "query=value"
hash: "hashtag"

Get The Query Value

To just get the value from the query string using a regular expression, you can modify the regular expression pattern to capture only the value part of the key-value pair. Here's an example of how you can do this:

let queryOnlyPattern = /(?:[?&])(query)=([^&#]+)/
let match = input.match(queryOnlyPattern)[2]
console.log(match)

In this example, the regular expression pattern is as follows:

• (?:[?&]) matches either the question mark or ampersand character that starts a key-value pair, but doesn't capture it.
• (query) captures the key "query" in a group.
• =([^&#]+) matches the equal sign and captures everything after it up until the next ampersand or hash symbol. The parentheses () around [^&#]+ create a capturing group that allows us to extract just the value part of the key-value pair.

The match() method searches for the first match of the regular expression pattern in the input string and returns an array containing the matched string and any captured groups. In this case, we extract the captured group at index 2 (the third item in the array) to get just the value of the "query" key.

In this example, the input is "https://thedevdrawer.com/path?query=value#hashtag" and the output will be:
value: "value"

NOTE: Keep in mind that this regex pattern is designed to match a specific format of URL, and may not work for all types of URLs or query/hash strings. It may require tweaking or additional patterns to match other formats.

Hopefully, this helped you understand regular expressions in JavaScript in case you had any questions about some of my previous videos that used them. If you have any questions, feel free to leave a comment below.

Read more articles on DevDrawer