JavaScript实现textarea提交后保留换行显示的解决方案

textarea中的换行是以**换行符（\n）**的形式存储的，但HTML默认不会将普通文本里的换行符渲染成视觉上的换行，所以直接插入到p标签内的span中时，换行效果会消失。以下两种方法可以解决这个问题：

方法一：将换行符替换为<br>标签 #

通过JavaScript把textarea内容里的所有换行符替换成HTML的换行标签<br>，这样插入到innerHTML后会被浏览器解析为换行。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div>
<textarea type="text" id="Question1" rows="5" cols="60">
-text number 1.
-text number 2.
-text number 3.
-text number 4.
</textarea><br />
<button onclick="getUserInput1();">submit</button><br />
</div>
<div>
<p>this is text in the textarea <span class="myId1"></span>.</p>
</div>
<script>
function getUserInput1() {
        var value1 = document.getElementById("Question1").value;
        // 将所有换行符替换为<br>标签
        var formattedValue = value1.replace(/\n/g, '<br>');
        var capita = document.getElementsByClassName("myId1");
        for (var i = 0; i < capita.length; i++) {  
            capita[i].innerHTML = formattedValue + " ";
        }
}
</script>
</body>
</html>

方法二：使用CSS保留换行 #

无需修改JavaScript逻辑，只需给承载内容的span元素添加white-space: pre-line;样式，该属性会保留文本中的换行，同时自动合并连续的空白字符，排版更自然。

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.myId1 {
    /* 保留换行，合并多余空格 */
    white-space: pre-line;
}
</style>
</head>
<body>
<div>
<textarea type="text" id="Question1" rows="5" cols="60">
-text number 1.
-text number 2.
-text number 3.
-text number 4.
</textarea><br />
<button onclick="getUserInput1();">submit</button><br />
</div>
<div>
<p>this is text in the textarea <span class="myId1"></span>.</p>
</div>
<script>
function getUserInput1() {
        var value1 = document.getElementById("Question1").value;
        var capita = document.getElementsByClassName("myId1");
        for (var i = 0; i < capita.length; i++) {  
            capita[i].innerHTML = value1 + " ";
        }
}
</script>
</body>
</html>

如果需要完全保留textarea中的所有空格和换行（包括开头的缩进），可以把white-space的值改成pre，但这种方式会严格按照原文本的空白格式渲染。

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