React读取WEBVTT转JSON时按句末句号规则添加换行的实现

核心调整逻辑 #

现有代码已完成时间轴拆分、字幕块归属判断的基础能力，只需补充对单行字幕文本的特殊处理，即可符合换行规则：

• 当连续句号组（无论1个还是多个连续句号）后面还有实际文本内容时，在这组句号的最后一个字符后插入换行
• 连续句号组在文本末尾没有后续内容时，不额外插入换行，避免冗余

具体修改点 #

在原有处理非时间行的逻辑里，先对当前单行文本做正则转换，再拼接到对应字幕条目的string字段：

1. 用正则 /(\.+)(?=[^.\n])/g 定位需要插入换行的位置：
   • 先匹配所有连续出现的句号串，不管是单个句号还是多个连续的省略号形式的句号
   • 加前瞻判断，确保这个句号串后面紧跟着的不是句号、也不是已经存在的换行符，避免误把行尾句号、已经换行分隔的文本当成需要处理的位置
2. 把匹配到的句号串原样保留，在后面追加换行符即可

修改后的对应代码段：

} else {
  // 预处理当前行文本，按规则插入换行
  const processedLine = d.replace(/(\.+)(?=[^.\n])/g, '$1\n');
  let existingStr = acc[inc]?.string;
  if (existingStr !== undefined) {
    existingStr += `\n${processedLine}`;
  } else {
    existingStr = processedLine;
  }
  acc[inc] = { ...acc[inc], string: existingStr };
}

场景匹配验证 #

所有测试场景的输出完全匹配预期：

• 文本Hi.：句号在末尾无后续内容，不插入换行，输出Hi.
• 文本Hi.Hi：单句号后紧跟字符，转换为Hi.\nHi
• 文本Hi..Hi：双连续句号后紧跟字符，转换为Hi..\nHi
• 文本Hi...Hi.：三连续句号后紧跟字符，末尾句号在句尾不处理，最终输出Hi...\nHi.
• 原本就通过换行分隔的Hi.\nHi.：句号后紧跟换行符，不触发额外插入，保持原有结构

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