如何让段落显示与textarea输入的文本格式完全一致？

你遇到的核心问题是textarea里的换行无法在段落中正确显示，之前的代码没起作用主要有两个原因：一是没处理回车键的默认行为与内容同步的逻辑冲突，二是没有覆盖所有内容变更场景。

以下是两种可行的解决方法：

方法一：CSS快速解决（推荐） #

不需要复杂JS，给显示用的段落添加CSS样式，让它自动识别换行逻辑：

.status-paragraph {
  white-space: pre-line;
  /* 保留输入的换行，同时合并连续空格/制表符，和textarea显示逻辑完全匹配 */
}

之后只需同步textarea内容到段落即可：

const textarea = document.querySelector('textarea');
const statusParagraph = document.querySelector('.status-paragraph');

textarea.addEventListener('input', function() {
  statusParagraph.textContent = this.value;
});

方法二：JavaScript处理换行转换 #

如果必须用<br>标签实现换行，需要监听所有内容变化场景，同时转义特殊字符避免安全问题：

const textarea = document.querySelector('textarea');
const statusParagraph = document.querySelector('.status-paragraph');

textarea.addEventListener('input', function() {
  // 先转义HTML特殊字符，防止XSS风险
  const escapedContent = this.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  // 将换行符替换为<br>标签
  statusParagraph.innerHTML = escapedContent.replace(/\n/g, '<br>');
});

之前代码无效的原因 #

• 事件函数里的statusParagraph参数是无效的，需要手动通过document.querySelector获取DOM元素
• 仅监听keydown事件无法覆盖粘贴、拖拽修改等场景，input事件能捕获所有内容变更
• 未处理回车键的默认行为，导致textarea自动添加换行的同时，代码额外插入<br>，造成内容混乱

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