基于动态分隔符拆分字符串并保留分隔符在结果数组中

我需要基于动态变化的分隔符拆分字符串，同时将分隔符保留在结果数组中。示例需求如下：

• 待拆分字符串：const match = 'somethingcatsomethingcatsomethingcat'
• 分隔符：const separator = 'cat'
• 期望结果数组：["something", "cat", "something", "cat", "something", "cat"]

我尝试过的方法 #

const separator = 'cat'
const match = 'somethingcatsomethingcatsomethingcat'

// 普通split，丢失分隔符，且末尾有空字符串
const standardSplit = match.split(separator)
console.log(standardSplit)
// >> Array ["something", "something", "something", ""]

// 硬编码正则的split，保留了分隔符，但末尾有空字符串，且无法动态传参
const withPureRegex = match.split(/(cat)/)
console.log(withPureRegex)
// >> Array ["something", "cat", "something", "cat", "something", "cat", ""]

// 错误的动态正则写法，完全没拆分
const regex = new RegExp(`/(${separator})/`, 'gi')
const withStringLiteral = match.split(regex)
console.log(withStringLiteral)
// >> Array ["somethingcatsomethingcatsomethingcat"]

我对正则不太熟悉，尝试过多种RegExp写法都没成功，而且多数相关问题都是针对固定分隔符的，动态分隔符的情况很少。如果只执行一次，我可以用普通split后手动插入分隔符，但需要多次执行，想避免额外性能开销。

解决方案 #

要实现动态分隔符的正确拆分，需要解决两个核心问题：正则特殊字符转义和正确构造RegExp对象。

1. 正则特殊字符转义函数

如果分隔符包含正则元字符（比如.、*、+、?等），直接当作正则匹配会出现异常，所以需要先转义：

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

2. 完整拆分代码

const separator = 'cat';
const match = 'somethingcatsomethingcatsomethingcat';

// 转义分隔符，避免正则语法错误
const escapedSeparator = escapeRegExp(separator);
// 构造正则：括号捕获分隔符，确保split时保留它；gi标志按需调整（全局、不区分大小写）
const regex = new RegExp(`(${escapedSeparator})`, 'gi');

// 拆分后过滤空字符串（处理原字符串以分隔符结尾的情况）
const result = match.split(regex).filter(item => item !== '');
console.log(result);
// >> ["something", "cat", "something", "cat", "something", "cat"]

说明 #

• 构造RegExp时不需要加正则字面量的/分隔符，直接传入字符串形式的正则表达式即可
• 用括号()包裹分隔符，是split能保留分隔符的关键——split会把捕获组的内容也加入结果数组
• filter用来移除拆分后可能出现的空字符串，比如原字符串以分隔符结尾时，最后一个元素会是空串

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