Ok, so now you know what a RegEx is and you are probably wondering: “How can I use it?”

There are several JavaScript functions that requires the use of RegEx.

Example:

It can happen that, for an application or for other purposes (in particular for E-commerce Tracking) you need to retrieve the price of a product in the order confirmation page.

You can easily access the source code of that page and see what the class, id or query selector of the element is, but the price will always be different. In this case, RegEx can be really useful.

Take a look for example at this pen:

You have a <p> tag with an id = “price” containing “tot: 45.50 €”. In order to get that part you can write a function similar to this:

Now, if you print that variable it will contains all the complete string “tot: 45.50 €”, but you just want to know the numeric value. You can simply remove the “tot:” and the “€” part by using this regex:

now, we can use for example the function called “match” to retrieve the part matched.

Match() function

It can be applied to a string and takes a RegEx as parameter. It find the match in that string and return an array with all the matches plus other information: index of the first match, input (the original string), groups (returns an array, if no group is present returns undefined).

If no flag “g” is present, it will return an array with only one element (first match), that can be accessed writing:

To access the other information you can use instead:

In the example that we were treating before (real life regex example) we don’t need to use the “g” flag, so our array will just contain 1 element at the index 0.

We can write:

Finally we have what we wanted.

Exec() function

Similar to match(), but it is applied to a regex and not to a string, and takes a string as parameter. It returns an array with all the matches, index, input and groups or null if no match has been found.

All the information of the array can be accessed in the same way of the function match().

If we take the same example of before we can write:

Replace() function

This function, like the match() function, operates on a string. It takes a regex (or a simple string) as first parameter and the string to replace as second.

It retrieves a new string with the character or characters of the first parameter replaced with the one/s of the second parameter.

Imagine that you have a string like this:

and you want to remove all the spaces in excess. To remove the spaces at the beginning and the end of the string you could use the trim() function, but what about all the others in the middle?

In this case you can easily use a replace() function that ca be written as follow:

We are simply saying to our replace function to take the string, match all the spaces (\s) that are present more than 1 time ({2,}), even if there is more than one pattern matched (g) and replace them with a single space ( “ ” ). The newString is now:

Split() function:

It operates on a string and takes a regex (or a simple character or a string) as argument. It returns an array in which the elements are pieces of the string separated by what it is specified in the argument.

To do a more “complex” example, in which you could use a regex instead of a string, let’s suppose that you want to create a calculator.

You enter the operations and numbers and store it in a string variable, but you need to separate the operations from the digits in that string.

If you want to separate the operators you can do:

While, if you need the digits you could use: