为何string.split拆分字符串不符合预期？如何正确拆分含括号的字符串

你当前用split(/\s+/)拆分时，会把hsl()内部的空格也当成分隔符，导致to-[hsl( 252, 100%, 96%)]被拆成多个片段。要实现预期的拆分效果，别用split，改用match配合精准的正则表达式，直接匹配出每个完整的类名：

const str = "w-full    from-[#b4abe3]  to-[hsl( 252, 100%, 96%)]";
const matched = str.match(/(?:[^\s[]+|\[[^\]]+\])+/g);
console.log(matched);

正则说明 #

这个正则专门针对Tailwind这类带方括号的类名设计：

• (?:[^\s[]+|\[[^\]]+\])+：匹配一个完整的类名单元，由两部分组合而成：
  • [^\s[]+：匹配普通的类名前缀（比如w-full、from-），排除空格和左方括号
  • \[[^\]]+\]：匹配方括号包裹的完整内容（不管里面有没有空格、逗号，只要没遇到右方括号就会持续匹配）
  • 两者通过|组合后再用+连接，就能把前缀和方括号内容合并成一个完整的类名

执行后输出结果就是你想要的：
["w-full", "from-[#b4abe3]", "to-[hsl( 252, 100%, 96%)]"]

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