Why does string.split with a regular expression that contains a capturing group return an array that ends with an empty string?
I’d like to split an input string on the first colon that still has characters after it on the same line.
For this, I am using the regular expression /:(.+)/
So given the string
aaa:
bbb:ccc
I’d expect an output of
["aaa:\nbbb", "ccc"]
And given the string
aaa:bbb:ccc
I’d expect an output of
["aaa", "bbb:ccc"]
Yet when I actually run these commands, I get
["aaa:\nbbb", "ccc", ""]
["aaa", "bbb:ccc", ""]
As output.
So somehow, javascript is adding an empty string to the end of the array.
I have checked the documentation for String.split
and whilst it does mention that if you perform string.split
on an empty string with a specified separator, you’ll get an array with 1 empty string in it (and not empty array). It makes no mention of there always being an empty string in the output, or a warning that you may get this result if you make a common mistake or something.
I’d understand if my input string had a colon at the end or something like that; then it splits at the colon and the rest of the match is empty string. That’s the issue mentioned in Splitting string with regular expression to make it array without empty element – but I don’t have this issue, as my input string does not end with my separator.
I know a quick solution in my case will be to just simply limit the amount of matches, via "aaa:bbb:ccc".split(/:(.+)/, 2)
, but I’m still curious:
Why does this string.split
call return an array ending with an empty string?
If we change the regex to /:.+/
and perform a split on it you get:
["aaa", ""]
This makes sense as the regex is matching the :bbb:ccc
.
And gives you the same output, if you were to manually split that string.
>>> 'aaa:bbb:ccc'.split(':bbb:ccc')
['aaa', '']
Adding the capture group in just saves the bbb:ccc
, but shouldn’t change the original split behaviour.
Interesting. Learnt a lot from this question. Let me share what I learnt.
Dot doesn’t match the new line
If we think about it, the intention is to split the string based on the :
followed by one or more number of characters. If that is the case, the output should have been
['aaa', '\nbbb:ccc', '']
right? Because the .+
matches greedily. So, it should have split at :\nbbb:ccc
, where :
matches :
and .+
matches \nbbb:ccc
. But the actual output you got was
[ 'aaa:\nbbb', 'ccc', '' ]
This is because, .
does not match line terminators. Quoting MDN,
(The dot, the decimal point) matches any single character except line terminators: \n, \r, \u2028 or \u2029.
So, :\n
doesn’t match :(.+)
. That is why it doesn’t break there. If you actually meant to match the new line as well, either use [^]
or [\s\S]
.
For example,
console.log(data.split(/:([\s\S]+)/));
// [ 'aaa:\nbbb', 'ccc', '' ]
console.log(data.split(/:([\s\S]+)/));
// [ 'aaa', '\nbbb:ccc', '' ]
console.log(data.split(/:([^]+)/));
// [ 'aaa', '\nbbb:ccc', '' ]
Now to answer your actual question, why there is an empty string at the end of splitting. When you cut a big line, how many lines do you get? Two small lines. So whenever you make a cut, there should be two objects. In your case, aaa:\nbbb
is the first cut, the actual place the cut happend is :ccc
, and since the string ends there, an empty string is included to indicate that the that is the end of the string.
From the ECMAScript 2015 spec (String.prototype.split
):
If separator is a regular expression that contains capturing
parentheses, then each time separator is matched the results
(including any undefined results) of the capturing parentheses are
spliced into the output array. For example,"A<B>bold</B>and<CODE>coded</CODE>".split(/<(\/)?([^<>]+)>/)
evaluates to the array:
["A", undefined, "B", "bold", "https://stackoverflow.com/", "B", "and", undefined, "CODE", "coded", "https://stackoverflow.com/", "CODE", ""]
Like in your example example, the output array here contains a trailing empty string, which is the portion of the input string past "coded"
that isn’t captured by the separator pattern (which captures "https://stackoverflow.com/"
and "CODE"
).
Not obvious, but makes sense as otherwise the separator captures would end up in the end of the split array where they actually would not separate anything.
My regexp always generates an extra element at the end of the array returned by string.prototype.split(). So I simply truncate the array every time. Seems better than Array.filter when it’s always the last element that is removed. I’m parsing CSS/SVG transforms, splitting on both left and right parentheses. Either of these works: /\(|\)/
or /[\(\)]/
.
For example:
arr = "rotate(90 46 88) scale(1.2 1.2)".split(/\(|\)/);
arr.length--;
Or if you want to get fancy and cram it into one line:
(arr = "rotate(90 46 88) scale(1.2 1.2)".split(/\(|\)/)).length--;
The result is: ["rotate","90 46 88","scale","1.2 1.2"]