Object-Oriented JavaScript — RegExp
Tags: webdev, programming, beginners, javascript
Published: 2021-01-24 21:57:12

**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.