Object-Oriented JavaScript — RegExp

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the RegExp object.

RegExp

The RegExp constructor lets us search and manipulate text.

JavaScript uses the Perl 5 syntax for defining regex.

A regex consists of a pattern to use and match the text.

It can optionally contain zero or more modifiers to provide more instructions on how the pattern should be used.

For instance, we can use the RegExp constructor by writing:

const re = new RegExp("c.*t");

We have a regex that matches a word with some letters in between c and t .

. means any character.

* means preceding whatever comes after.

We can add some modifiers called flags to change the regex.

Some flags include:

• g for global.
• i for ignoring case
• m for multiline

So if we have:

const re = new RegExp("c.*t", 'gmi');

We can check that it does global match with the global property.

So re.global should return true .

The property can’t be set, so assigning a value to it won’t change the value.

RegExp Methods

RegExp instances have some methods.

They include the test and exec method.

test checks whether a string matches the regex pattern.

And exec returns the string the matches the regex.

We can call test by running;

/c.*t/.test("CoffeeScript");

then we get false .

But we call:

/c.*t/i.test("CoffeeScript");

then we get true because of the case-insensitive match.

To call exec , we can write:

/c.*t/i.exec("CoffeesScript")[0];

Then we get:

"CoffeesScript"

String Methods that Accept Regex as Arguments

Some string methods accept regex as arguments.

They include:

• match — returns an array of matches
• search — returns the position of the first search
• replace — substitute matched text with another string
• split — accepts a regex when splitting string into an array of elements

We can pass in a regex to search and match .

For instance, we can write:

'JavaScript'.match(/a/);

then we get ['a'] .

If we have”

'JavaScript'.match(/a/g);

Then we get:

["a", "a"]

If we write:

'JavaScript'.match(/J.*a/g);

then we get:

["Java"]

If we call search :

'JavaScript'.search(/J.*a/g);

then we get the position of the matched string, which is 0.

The replace method lets us replace the matched text with some other string.

For instance, we can remove all lowercase letters by writing:

'JavaScript'.replace(/[a-z]/g, '')

Then we get:

"JS"

We can also use the $& placeholder to let us add something to matches.

For instance, we can write:

'JavaScript'.replace(/[A-Z]/g, '-$&')

Then we get:

"-Java-Script"

replace can take a callback that lets us return the matches manipulated our way.

For instance, we can write:

'JavaScript'.replace(/[A-Z]/g, (match) => {
  return `-${match.toLowerCase()}`;
})

Then we get:

"-java-script"

We replaced the upper case characters with lower case and add a dash before it.

The first parameter of the callback is the match.

The last is the string being searched.

The one before last is the position of the match .

And the rest of the parameters have any strings matched by any group in our regex pattern.

The split method lets us split a string.

It takes a regex with the [pattern to split by.

For instance, we write:

const csv = 'one, two,three ,four'.split(/s*,s*/);

Then we get:

["one", "two", "three", "four"]

We split the string by the whitespace to get that.

Conclusion

The RegExp constructor lets us find patterns in a string and work with them.