-1

How the following code differ and how they work?

I am learning regular expressions in javascript. I am confused about the following code. I want to know how they work, and their differences.

"abc".replace(/[a-z]??/g, "-")  
// "-a-b-c-"
"abc".match(/[a-z]??/g)
// ["", "", "", ""]

"abc".replace(/[a-z]?/g, "-")
// "----"
"abc".match(/[a-z]?/g);
// ["a", "b", "c", ""]

Why there are four matches for both of them? How come the first replace method insert the - at both beginning and end? Why the second only match the end not the beginning of the "abc"?

mplungjan
  • 169,008
  • 28
  • 173
  • 236

1 Answers1

0

The quantifier '?' by itself just means "match zero or one of the preceding character/character group." However, adding a second '?' makes the preceding quantifier lazy, matching as few characters as possible. This means that the .match() function attempts to match exactly zero of the preceding character group, which can cause rather funky behavior. In this case, it's detecting an empty string before and after each character, a behavior that isn't immediately apparent, so .replace() will stick the "-" character in those empty string slots — that is, between each character.

However, without the second ?, we have just the vanilla ? quantifier, matching zero or one of the preceding character/character group. Given character group [a-z], your regex matches each alphabetical character by itself, as expected — and also has a single empty match somewhere, hence the replacement "----" (as opposed to the more intuitive "---").

chang_trenton
  • 827
  • 6
  • 10