通过正则表达式分割字符串

Question

I have the following code snippet:

var colorText = "red,blue,green,yellow";
var colors3 = colorText.split(/[^\,]+/);
alert(colors3); // ["", ",", ",", ",", ""]

I don't understand what's going on here. As far as I understand, the regular expression will match any commas at the beginning of a string, and it matches 1 or more of these strings. What happens when we provide this regular expression as the argument to split ? Surely, if we just tried to match the regex against colorText , we'd be getting no match, because the starting character is not a comma. But how does the regex provided to split lead to an array of commas and two empty string on each side?

Answer 1

Why do you need a regex when you can simply do split(',') ?

 var colorText = "red,blue,green,yellow"; var colors3 = colorText.split(','); console.log(colors3); 

If you want to select everything but the comma then maybe using match is a better idea.

 var colorText = ",red,blue,green,yellow"; var colors3 = colorText.match(/[^\\,]+/g); console.log(colors3); 

Answer 2

As explained in MDN web docs [^xyz]

A negated or complemented character set. That is, it matches anything that is not enclosed in the brackets.

Your regex /[^\\,]+/ will match any sequence of characters that doesn't include any comma.

So your regex will match these sequences in colorText :

• red
• blue
• green
• yellow

and the split function will split colorText at those sequences.

However, if you want to split your string at each comma, use this:

colors = colorText.split(',');

Answer 3

If you like to prevent empty items on splitting, you could use String#match instead of String#split and a regular expression which matches all characters except commas.

 var regex = /[^,]+/g; console.log(",red,blue,green,yellow,".match(regex)); console.log("red,blue,green,yellow".match(regex)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 4

So, my goal was not to separate the words in the string by comma. I found this code in a book and wanted to understand it. The mistake I made was that I thought that the ^ matched the beginning of a string, while in fact it means "anything but" inside of square brackets. Now I understand that the regular expression matches any number of character that is not a comma, and that's what tells split() what to put in each list element. The first and last elements are empty strings because that's what at the left and right side of the first and last words, respectively.

Answer 5

You have to remove that caret ^ from var colors3 = colorText.split(/[^\\,]+/); so that it works well:

 var colorText = "red,blue,green,yellow"; var colors3 = colorText.split(/[\\,]+/); console.log(colors3);