如何消除OpenAI API返回内容在HTML聊天框中的空行空格？

问题现象 #

将OpenAI API生成的响应渲染到HTML聊天框时，每行末尾会自动添加<br>标签或换行符，导致出现大量多余空格；但刷新页面后，这些空格会消失。

现有代码分析 #

以下是当前渲染聊天消息的JavaScript代码片段：

// Display the conversation data in the chat box
if (conversation.length > 1) {
  const messages = conversation.map(message => {
    if (message.sender === 'user') {
      return `
        <div class="message sent ${botMessageClass2}">
          <div class="message-content">
            <div class="sent_t">${message.prompt}
              <p class="text-end time text-muted">${message.time}</p>
            </div>
          </div>
        </div>
      `;
    } else {
      return `
        <div class="message recieved ${botMessageClass}">
          <div class="message-content">
            <div class="recieved_t">
              
            ${message.bot.filter(line => line.trim() !== '').map((line, index) => {
              if (index === 0) {
                // Remove leading whitespace and "A:" prefix from first line
                return `<p style="margin-bottom:0px;">${line.trim().replace(/^A:\S*/,'')}</p>`;
              } else {
                console.log(line+"chime");
                return `<p style="margin-bottom:0px;">${line.trim().replace(/^A:\S*/,'')}</p>`;
              }
            }).join('<br>')}
              <p class="text-end time text-muted">${message.time}</p>
            </div>
          </div>
        </div>
      `;
    }
  });
  chatBox.innerHTML = messages.join('');
  chatBox.scrollTop = chatBox.scrollHeight;
}

你尝试用$('.recieved_t br').remove();移除多余的<br>，但该操作仅在页面刷新后生效，核心原因是这段代码的执行时机早于聊天消息的动态渲染，或是因为代码手动添加了不必要的<br>标签。

有效解决方案 #

方案1：移除不必要的<br>连接 #

当前代码中，每个处理后的行都被包装成<p>标签，而<p>是块级元素，默认会自动换行，不需要额外用<br>来分隔。直接将join('<br>')改为join('')，避免生成多余的换行标签：

message.bot.filter(line => line.trim() !== '').map((line, index) => {
  if (index === 0) {
    return `<p style="margin-bottom:0px;">${line.trim().replace(/^A:\S*/,'')}</p>`;
  } else {
    console.log(line+"chime");
    return `<p style="margin-bottom:0px;">${line.trim().replace(/^A:\S*/,'')}</p>`;
  }
}).join('') // 替换原有的'<br>'，用空字符串连接

方案2：确保DOM操作时机正确 #

如果仍需要处理动态生成的<br>，需在聊天消息渲染完成后再执行移除操作，将移除代码放在chatBox.innerHTML赋值之后：

chatBox.innerHTML = messages.join('');
// 用原生JS移除多余的<br>标签，避免jQuery依赖问题
document.querySelectorAll('.recieved_t br').forEach(br => br.remove());
chatBox.scrollTop = chatBox.scrollHeight;

改进建议 #

1. 修正拼写错误：代码中的recieved是拼写错误，正确应为received，建议统一修改类名（包括HTML中的类和CSS/JS中的选择器），避免后续维护出错。
2. 内联样式迁移：将<p>标签的style="margin-bottom:0px;"移到外部CSS样式表中，便于统一管理：

.recieved_t p {
  margin-bottom: 0;
}

3. 简化重复代码：处理每行的逻辑在index===0和else分支中重复，可合并优化：

message.bot.filter(line => line.trim() !== '').map((line, index) => {
  // 统一处理：移除前缀和多余空格
  const content = line.trim().replace(/^A:\S*/, '');
  return `<p>${content}</p>`;
}).join('')

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