如何在 JavaScript 中基于动态分隔符分割字符串并保留分隔符-js教程-PHP中文网

如何在 JavaScript 中基于动态分隔符分割字符串并保留分隔符

本文介绍一种高效、可复用的方法：使用动态构建的正则表达式配合 split() 与 filter(Boolean)，实现字符串按任意变量分隔符切割，同时将分隔符保留在结果数组中。

本文介绍一种高效、可复用的方法：使用动态构建的正则表达式配合 `split()` 与 `filter(boolean)`，实现字符串按任意变量分隔符切割，同时将分隔符保留在结果数组中。

在 JavaScript 中，String.prototype.split() 默认会丢弃分隔符；若需保留（如用于语法解析、文本高亮或分段处理），需借助正则表达式的捕获组（(...)）。但当分隔符是运行时变量（如 const separator = 'cat'）时，不能直接写死 / (cat)/g，而必须动态构造正则表达式。

关键在于两点：

正确转义分隔符中的特殊正则字符（如 ., *, +, ?, (, ), [, ], {, }, ^, $, |, ），否则会导致匹配异常；
使用捕获组 (...) 并启用全局标志 g，使 split() 将匹配内容（含分隔符）作为独立数组元素返回；
过滤末尾空字符串：当原字符串以分隔符结尾时，split() 会产生一个空字符串元素（如示例末尾的 ""），可用 .filter(Boolean) 安全移除（它会剔除所有 falsy 值，包括 "", undefined, null, 0, false —— 此处仅需处理空串，故安全有效）。

以下是完整、健壮的实现：

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

function splitWithSeparator(str, separator) {
  // 对 separator 中的正则特殊字符进行转义
  const escapedSep = separator.replace(/[.*+?^${}()|[]\]/g, '\$&');
  const reg = new RegExp(`(${escapedSep})`, 'g');
  return str.split(reg).filter(Boolean);
}

// 示例使用
const match = 'somethingcatsomethingcatsomethingcat';
const separator = 'cat';
console.log(splitWithSeparator(match, separator));
// → ["something", "cat", "something", "cat", "something", "cat"]

// 支持含正则元字符的分隔符（如分隔符为 "a.b"）
console.log(splitWithSeparator('xaybzxaybz', 'a.b')); 
// → ["x", "a.b", "z", "a.b", "z"] （若未转义，会错误匹配任意字符）

⚠️ 注意事项：

若分隔符本身包含正则元字符（如 . 匹配任意字符、* 表示零次或多次），必须转义，否则正则行为将偏离预期。上述 replace 正则已覆盖全部需转义字符；
filter(Boolean) 在绝大多数场景下足够安全，但若业务逻辑允许字符串为 "0" 或 "" 且需保留，应改用更精确的过滤：.filter(item => item !== '')；
性能方面：该方案纯函数式、无循环拼接，适用于高频调用场景，比手动遍历插入分隔符更简洁高效。