React实时语音转文字应用：Chrome中replaceAll正则换行失效求助

方案1：CSS样式适配（推荐） #

给渲染转写文本的容器添加CSS规则，让浏览器自动解析文本中的换行符：

.transcript-container {
  white-space: pre-line;
}

React组件中使用：

<div className="transcript-container">{yourProcessedText}</div>

此方案无需修改现有正则替换逻辑（.replaceAll(/\. /g, '.\n \n')），\n会被所有主流浏览器（包括Chrome）正确渲染为换行，同时自动合并多余空格，符合排版习惯。

方案2：替换为HTML换行标签 #

若需更精细控制排版，可将换行符替换为HTML <br />标签，分两种实现方式：

方式A：使用dangerouslySetInnerHTML（快速实现） #

const formattedText = rawTranscript.replaceAll(/\. /g, '.\n\n').replace(/\n/g, '<br />');
<div dangerouslySetInnerHTML={{ __html: formattedText }} />

注意：此方法存在XSS风险，仅适用于可信来源的转写内容。

方式B：React元素拆分（安全可控） #

通过拆分文本生成React元素，避免XSS问题：

const splitSegments = rawTranscript.split(/\. /g);
const formattedElements = splitSegments.map((segment, idx) => (
  idx === splitSegments.length - 1 ? (
    <span key={idx}>{segment}</span>
  ) : (
    <span key={idx}>{segment}. <br /><br /></span>
  )
));
<div>{formattedElements}</div>

问题根源 #

React默认将文本中的\n视为普通空格，HTML标准也不会渲染纯文本换行符。Edge的生效属于浏览器特定渲染行为，并非跨浏览器标准。

内容的提问来源于stack exchange，提问作者Jason D'Aiuto