如何使用JS在div元素中显示textarea的多行文本内容？

这个问题我开发时也碰到过！核心原因很简单：textarea里的换行是换行符(\n)（部分Windows系统是\r\n），但HTML默认会把这类换行符当成普通空格处理，所以显示出来就变成一行了。下面给你两种实用的解决办法：

方法一：用JavaScript替换换行符为HTML换行标签 #

直接修改你的test函数，把文本里的换行符全局替换成<br>标签，这样HTML就会渲染成换行效果：

function test() {
  var b = document.getElementById('mytext').value;
  // 匹配所有换行符（兼容\n和\r\n）并替换成<br>
  var formattedText = b.replace(/\r?\n/g, '<br>');
  document.getElementById('here').innerHTML = formattedText;
}

这种方式适合需要对文本做额外HTML处理的场景，比如同时替换其他特殊字符。

方法二：用CSS让div识别换行符 #

如果你不想修改JavaScript逻辑，可以给目标div添加CSS样式，让它自动识别文本里的换行符：

#here {
  white-space: pre-line;
}

• white-space: pre-line：会保留换行符，同时自动合并连续的空格，显示效果和textarea基本一致。
• 如果需要完全复刻textarea的格式（包括保留多个连续空格），可以改成white-space: pre-wrap。

两种方法都能解决你的问题，根据实际需求选就行～

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