如何使用split正则表达式保留分隔符切分字符串

在处理字符串拆分时，有一个容易忽略的技术细节：默认情况下，split() 方法会直接舍弃分隔符，仅保留被分割后的各个片段。但在许多实际场景中——比如解析日志信息、处理特定格式的文本，或者实现语法高亮——我们恰恰需要将这些分隔符一并保留。此时，借助带捕获组的正则表达式就能高效解决问题。

简单来说，秘诀就在于：给正则表达式加上括号。一旦正则中包含捕获组 ()，JavaScript 引擎就会将匹配到的分隔符作为独立元素插入到结果数组中，紧跟在它所分割出的内容后面。

核心原理：捕获组如何“保住”分隔符

这一机制的原理相当直观。没有括号时，split() 只负责找到切割位置，切割完成后就会丢弃分隔符。而一旦使用了捕获组，引擎会认为：“括号内的内容也需要被记录。”因此，它在执行分割的同时，会将每次匹配到的分隔符单独提取出来，并按顺序放入结果数组。

请看以下对比：

• "a,b;c".split(/[,;]/) 返回 ["a", "b", "c"] —— 逗号和分号被移除。
• "a,b;c".split(/([,;])/) 返回 ["a", ",", "b", ";", "c"] —— 每个分隔符都作为独立项被保留。

应对复杂场景：多个分隔符与模式匹配

这个技巧具有很强的实用性。无论是处理多个分隔符，还是更复杂的匹配模式，只需加入捕获组即可生效。

• 保留空格或等号：解析“key = value”这类字符串时，"key = value".split(/(\s+|=)/) 会得到 ["key", " = ", "value"]，连空格加等号一并留住。
• 简单匹配 HTML 标签：对于 "abcdefghi"，使用 .split(/(<\/?[^>]+>)/) 可拆分为 ["abc", "", "def", "", "ghi"]，标签与文本分离，便于后续处理。
• 注意非捕获组：若你只想用括号进行分组而不希望保留内容，务必使用非捕获组语法 (?:...)，这样匹配的内容就不会被注入结果数组中。

结果清理：处理空字符串与结构重组

使用捕获组后，可能会产生一些“副产品”。例如，当字符串以分隔符开头或结尾，或者分隔符连续出现时，结果数组中会出现空字符串 ""。

举例来说，"|a|b|".split(/(\|)/) 会返回 ["", "|", "a", "|", "b", "|", ""]，开头和结尾的空字符串属于多余元素。

此时，只需使用 .filter(Boolean) 即可去除它们：["", "|", "a", "|", "b", "|", ""].filter(Boolean) 的结果为 ["|", "a", "|", "b", "|"]。

当然，若你需要保持“内容-分隔符-内容”的清晰结构，则可能需要借助 reduce 或循环来手动重组数组，这能为你提供更大的控制灵活性。

另一种思路：直接用 match 或许更清晰

当拆分逻辑变得复杂（比如需要区分不同类型的分隔符，或要对匹配内容进行预处理）时，放弃 split() 转而使用 match() 方法可能更加直观且易于维护。

核心思路是编写一个能同时匹配“非分隔符内容”和“分隔符本身”的正则表达式，然后用 match() 一次性提取所有片段。

• 例如："a,b;c".match(/[^,;]+|[,;]/g) 同样可以得到 ["a", ",", "b", ";", "c"]。
• 这个正则 /[^,;]+|[,;]/g 的含义是：匹配“一个或多个非逗号/分号的字符”或者匹配“一个逗号或分号”。这样能确保覆盖字符串的每一个部分，且天然保留了分隔符。

这种方法的优势在于逻辑外显，一目了然。你无需依赖 split() 那种“遇到捕获组就保留”的隐式行为，正则表达式本身直接声明了你要匹配的内容。代码更易调试，也更便于扩展以适应更复杂的业务需求。