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 indx 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
TheString.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.
Conclusion
The y flag is a new flag introduced with ES6 which works differently with different methods.
