Best of Modern JavaScript — Regex y Flag
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

Photo by Stephen Leonardi on Unsplash

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at new JavaScript regex features.

Search and the y Flag

The String.prototype.search method ignores the y flag.

lastIndex isn’t changed by it.

For example, if we have:

const REGEX = /foo/y; REGEX.lastIndex = 8;

const match = 'barfoobarfoo'.search(REGEX);

console.log(match.index);

console.log(REGEX.lastIndex);

Then match us undefined and lastIndex stays at 8.

We can only search from the beginning of the string with it.

The String.prototype.match works differently depending on whether the g flag is added with y .

If g isn’t, it works like exec .

If g is set, then it returns an array with string parts that’s matched or null .

For instance, if we write:

const REGEX = /a/; REGEX.lastIndex = 7;

console.log('abab'.match(REGEX).index);

console.log(REGEX.lastIndex);

Then index is 0, and lastIndex is 7.

It gets the first if no flag is added.

If we add the y flag:

const REGEX = /a/y; REGEX.lastIndex = 2;

console.log('abab'.match(REGEX).index);

console.log(REGEX.lastIndex);

Then the match is only returned if the search starts from the lastIndex .

The index must be exact.

lastIndex will then be updated after the match is found.

If the g flag is set, then match will match all the substrings and put them in the array.

For example, we can write:

const REGEX = /a|b/g; REGEX.lastIndex = 0;

console.log('abab'.match(REGEX));

console.log(REGEX.lastIndex);

And match returns [“a”, “b”, “a”, “b”] .

lastIndex is still 0.

lastIndex is ignored with the g flag enabled.

The result is the same with the gy flags added.

match and lastIndex all give us the same result.

Split Strings

String.prototype.split method lets us split a string.

The y flag will make the method’s behavior change.

For example, we can write:

console.log('abb'.split(/b/y))

console.log('bba'.split(/b/y))

The strings will be split with b as the separator.

So we get:

["a", "", ""]

and

["", "", "a"]

The y flag works regardless of the location of the flag.

We can also put the pattern in a capturing group:

console.log('abb'.split(/(b)/y))

Then we get:

["a", "b", "", "b", ""]

as the result.

Replace Strings

The String.prototype.replace method lets us replace strings by matching them with a regex.

For instance, if we write:

const REGEX = /a/;

console.log('baba'.replace(REGEX, 'x'));

Then we get 'bxba’ logged.

It only logs the first entry that’s matched.

If the y flag is added, we also get at most one match.

But the match is always searched from the beginning of the string.

For example, if we have:

const REGEX = /a/y;

REGEX.lastIndex = 2;

console.log('baba'.replace(REGEX, 'x'));

Then we get 'baba’ logged.

If the lastIndex is beyond the first match, then it’ll be ignored even if there’s a match available.

With the g flag, the replace replaces all matches.

So, if we have:

const REGEX = /a/g;

REGEX.lastIndex = 2;

console.log('baba'.replace(REGEX, 'x'));

Then we get 'bxbx' logged.

If we combine the g and y flags:

const REGEX = /a/gy;

console.log('baba'.replace(REGEX, 'x'));

Then 'baba’ is returned from the replace method.

But if we have:

const REGEX = /a/gy;

console.log('aaba'.replace(REGEX, 'x'));

Then we get ‘xxba’ . This means that the first match must be at the beginning of the string for replace to work.

Photo by Ashley Ross on Unsplash

Conclusion