JavaScript正则：按指定文本分割字符串并保留分隔符

问题场景 #

现有以下代码，意图将字符串按指定匹配文本分割，同时保留分隔符：

var extendedText = "the Quick Brown Fox Jumps Over the Lazy Dog"
var matchText = "the"

var regex = new RegExp(`(?=[^.*${matchText}.*$])|(?<=[^.*${matchText}.*$])`);

var splitText = extendedText.split(regex);

期望输出结果：

['the', ' quick brown fox jumps over ', 'the', ' lazy dog']

但当前正则会把非匹配文本拆成单个字符，实际输出类似：

['the', '', ' ', '', 'q', '', 'u', '', 'i', '', 'c', ……, 'the', '', ' ', '', 'l', '', 'a', ……]

解决方案 #

方法1：调整正则表达式 #

原正则逻辑错误，导致在每个字符前后都插入了分割点。要实现保留分隔符的分割，需用正向/反向零宽断言精准定位分隔符的前后位置：

var extendedText = "the Quick Brown Fox Jumps Over the Lazy Dog"
var matchText = "the"
// 转义正则特殊字符，避免语法冲突
var escapedMatch = matchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// 匹配分隔符的前/后位置，实现分割后保留分隔符
var regex = new RegExp(`(?=${escapedMatch})|(?<=${escapedMatch})`);
var splitText = extendedText.split(regex).filter(item => item); // 过滤空字符串
console.log(splitText);

解释：

• (?=${escapedMatch})：正向零宽断言，匹配matchText之前的位置
• (?<=${escapedMatch})：反向零宽断言，匹配matchText之后的位置
• .filter(item => item)：移除分割产生的空字符串

方法2：使用match替代split（更直观） #

如果只是要提取分隔符和中间的非匹配内容，用match配合简单正则反而更清晰：

var extendedText = "the Quick Brown Fox Jumps Over the Lazy Dog"
var matchText = "the"
var escapedMatch = matchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
var regex = new RegExp(`${escapedMatch}|[^${escapedMatch}]+`, 'gi');
var result = extendedText.match(regex);
console.log(result);

解释：

• 正则直接匹配matchText，或者匹配连续的非matchText内容
• gi标志：全局匹配+忽略大小写（可根据需求移除i）

关键注意点 #

• 必须对matchText中的正则特殊字符（如.、*、+等）进行转义，否则会导致匹配异常

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