Regex to split a comma separated css class names string into array

Question

I need to split a CSS class names string into array of CSS class names in JavaScript. All the below strings should produce the same array.

'lmn-button,lmn-button-primary' => ['lmn-button', 'lmn-button-primary']

'lmn-button, lmn-button-primary' => ['lmn-button', 'lmn-button-primary'] // Note the space after comma

'lmn-button ,lmn-button-primary' => ['lmn-button', 'lmn-button-primary'] // Note the space before comma

'  lmn-button ,lmn-button-primary' => ['lmn-button', 'lmn-button-primary'] // Note the space at start

'lmn-button ,lmn-button-primary  ' => ['lmn-button', 'lmn-button-primary'] // Note the space at end

Currently I'm using code to do that,

cssClassesString.split(',').map(cssClass => cssClass.trim());

But I believe regex would be a better solution that this right?

I got this regex by googling /([^,]+) but the result array has spaces in class names.

How can I improve the above regex to handle that?

I would suggest to avoid regex where string methods can do the job, but if you prefer regex, what about: /([^, ]+)/ which means "any character but not space or comma, one or more times"? — urban
– urban, Commented Apr 7, 2018 at 9:25

Alexandre Annic · Accepted Answer · 2018-04-07 09:52:37Z

5

const arr = ' lmn-button ,lmn-button-primary'.trim().split(/\s*,\s*/);
console.log(arr);

edited Apr 7, 2018 at 9:52

answered Apr 7, 2018 at 9:25

Alexandre Annic

10.9k6 gold badges44 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VJAI Over a year ago

If there are spaces at start or end of the string ' lmn-button ,lmn-button-primary ', the regex is not working very well. I know I'm asking too much. Is it possible to handle that?

Wiktor Stribiżew · Accepted Answer · 2018-04-07 11:09:55Z

4

You may simply extract all substrings that consist of 1+ chars other than whitespace and comma.

var result = s.match(/[^,\s]+/g)

See the regex demo.

The [^...] is a negated character class matching any char but the one(s) specified in the class. , matches commas and \s matches any whitespace chars, so [^,\s] matches any char but a comma and whitespace. + quantifier matches 1+ consecutive occurrences of such chars.

JS demo:

var tests = ['lmn-button,lmn-button-primary', 'lmn-button, lmn-button-primary', 'lmn-button ,lmn-button-primary','  lmn-button ,lmn-button-primary', 'lmn-button ,lmn-button-primary  '];
var rx = /[^\s,]+/g;
for (var s of tests) {
  console.log(s, "=>", s.match(rx));
}

edited Apr 7, 2018 at 11:09

answered Apr 7, 2018 at 11:03

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Comments

Mohammad Ali Rony · Accepted Answer · 2018-04-07 09:31:27Z

1

You can you use this

console.log('lmn-button ,lmn-button-primary'.split(/[ ,.]+/));

answered Apr 7, 2018 at 9:31

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

1 Comment

SteveR Over a year ago

This does not handle a string that starts or ends with spaces (or commas) -- in that case you would end up with empty strings in the array. I would use a trim() before the split() function. Also, using the \s whitespace char would handle embedded tabs.

Collectives™ on Stack Overflow

Regex to split a comma separated css class names string into array

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related