从API获取文本时丢失格式问题（JavaScript）

Hey there! No worries at all—we’ve all been new to programming at some point 😊 Let’s break down why this is happening and how to fix it:

为什么网页端输出会压缩格式？ #

浏览器在渲染HTML时，默认会把多个连续空格、换行符、制表符合并成单个空格，这是HTML的标准排版规则。而控制台是直接输出原始字符串内容，不会做这种合并处理，所以你能在控制台看到正确的格式，但网页上就被压缩成了长串。

几种保留格式的解决方案 #

1. 使用<pre>标签（最直接的方式） #

<pre>标签的作用就是保留文本的原始格式，包括空格、换行和缩进。把你的API文本放到这个标签里就行：

// 假设你从API获取的文本存在apiText变量中
const outputElement = document.getElementById('your-output-element');

// 注意：如果文本包含HTML特殊字符（比如<、>、&），需要先转义避免渲染异常
function escapeHtml(text) {
  return text
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

outputElement.innerHTML = `<pre>${escapeHtml(apiText)}</pre>`;

2. 用CSS的white-space属性（灵活可控） #

如果不想用<pre>的默认等宽字体，或者希望文本能自动换行（避免横向溢出），可以给显示文本的元素设置CSS属性：

.text-display {
  white-space: pre-wrap; /* 保留空格和换行，同时允许文本自动换行 */
  /* 可选：white-space: pre-line; 会合并连续空格，但保留换行 */
}

然后在JS里直接用textContent赋值（更安全，避免XSS风险）：

const outputElement = document.getElementById('your-output-element');
outputElement.textContent = apiText;

3. 手动转换格式（按需定制） #

如果只需要保留换行，或者想自定义格式，可以把换行符转换成<br>标签，连续空格转换成 ：

function formatTextForHtml(text) {
  // 替换换行符为<br>标签
  let formattedText = text.replace(/\n/g, '<br>');
  // 替换连续空格为对应的&nbsp;
  formattedText = formattedText.replace(/  +/g, match => '&nbsp;'.repeat(match.length));
  return formattedText;
}

const outputElement = document.getElementById('your-output-element');
outputElement.innerHTML = formatTextForHtml(apiText);

推荐优先用方案2，因为textContent更安全，CSS控制样式也更灵活。

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