match() returns array with two matches when I expect one match

javascript regex string match

20,742

Solution 1

From String.prototype.match ^[MDN]:

If the regular expression does not include the g flag, returns the same result as regexp.exec(string).

Where the RegExp.prototype.exec documentation ^[MDN] says:

The returned array has the matched text as the first item, and then one item for each capturing parenthesis that matched containing the text that was captured.

So as you introduced a capture group in the second expression, the first element is the whole match and the second contains the content of the capture group, which, in your example, is the whole match as well.
The first expression does not have a capture group, so you only get back the match.

Back to the match documentation:

If the regular expression includes the g flag, the method returns an Array containing all matches. If there were no matches, the method returns null.

With the g modifier, only matches are returned, but not the content of capture groups. In your string there is only one match.

Solution 2

The .match() function returns an array. document.write() printed the array as a string.

When you captured a group in the string it makes an Array like this:

Array(
  [0] => 'the complete matched string',
  [1] => 'the first captured group',
  [2] => 'the second captured group', 
  [.] => '...'
)

So with your regex it becomes:

Array(
  [0] => '.jpg', // You match .jpg of the string
  [1] => '.jpg' // You captured the .jpg match
)

And if you print an array it places a , between the values.

20,742

Author by

Vasil

Updated on January 11, 2020

Comments

Vasil over 4 years

Consider the following example:

<html>
<body>

<script type="text/javascript">

var str="filename.jpg";

var pattOne = new RegExp('\.[^\.]*$');
var pattTwo = new RegExp('(\.[^\.]*$)');
var pattThree = new RegExp('(\.[^\.]*$)', 'g');

document.write(str.match(pattOne));
document.write('<br>');
document.write(str.match(pattTwo));
document.write('<br>');
document.write(str.match(pattThree));

</script>
</body>
</html>

Here is the result:

.jpg
.jpg,.jpg
.jpg

I expect this result:

.jpg
.jpg
.jpg

Why placing parenthesis around the regular expression changes the result? Why using 'g' modifier changes again the result?

zaphod1984 over 12 years

the answer is correct, for clearness: capturing a group match happens because of the added parentheses. this is helpful when you like to work on certain submatches. for example this would be possible: var pattOne = new RegExp('\.([^\.]*)$'); than the group only contains the file-extension without the point.
qwertymk over 12 years

I see some PHP poking through there