JavaScript中使用正则分割带空格的CSS类名字符串为数组

要处理各种带空格的逗号分隔类名字符串，生成干净的类名数组，这里有两种靠谱的方案：

方案一：分割+清理+过滤（健壮性强） #

这种方法分步处理，能应对更多边缘情况（比如类名前后意外带空格、连续逗号等）：

function splitClassNames(classStr) {
  return classStr
    .split(/\s*,\s*/) // 按逗号分割，自动忽略逗号前后的任意空白字符
    .map(className => className.trim()) // 移除每个类名自身前后的空白
    .filter(className => className.length > 0); // 过滤掉空字符串（比如开头/结尾的逗号导致的空元素）
}

测试所有场景： #

// 无空格的逗号分隔
console.log(splitClassNames('lmn-button,lmn-button-primary'));
// 输出: ['lmn-button', 'lmn-button-primary']

// 逗号后有空格
console.log(splitClassNames('lmn-button, lmn-button-primary'));
// 输出: ['lmn-button', 'lmn-button-primary']

// 逗号前有空格
console.log(splitClassNames('lmn-button ,lmn-button-primary'));
// 输出: ['lmn-button', 'lmn-button-primary']

// 开头有空格+逗号前后均有空格
console.log(splitClassNames(' lmn-button ,lmn-button-primary'));
// 输出: ['lmn-button', 'lmn-button-primary']

方案二：正则匹配（简洁高效） #

如果你的类名不会包含特殊的转义字符（实际开发中绝大多数情况都是这样），可以用更简洁的正则匹配方案，直接提取所有符合要求的类名：

function splitClassNames(classStr) {
  // 全局匹配所有非空格、非逗号的连续字符，没有匹配到则返回空数组
  return classStr.match(/[^\s,]+/g) || [];
}

这个方法原理很简单：[^\s,]+匹配所有不包含空格和逗号的连续字符，刚好对应每个独立的CSS类名，全局匹配后直接得到干净的数组。测试下来同样能完美处理你给出的所有场景。

两种方案的适用场景 #

• 第一种方法逻辑清晰，能应对比如',lmn-button,, '这种极端输入（会返回['lmn-button']），适合对输入容错性要求高的场景。
• 第二种方法代码更短、执行效率高，适合常规业务场景下的类名分割需求。

内容的提问来源于stack exchange，提问作者VJAI