正则表达式将逗号分隔的css类名称字符串拆分为数组

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?

Answer 1

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

Answer 2

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)); } 

Answer 3

你可以用它吗？

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