如何在DIV中打印含\n换行符的输入字段文本为两行

核心问题说明 #

输入框中输入的Test1\nTest2里的\n是两个独立字符（反斜杠+字母n），并非真正的换行符；另外用innerText插入内容时，会把<br>当作普通文本渲染，无法触发换行效果。

解决方案 #

1. 正确替换转义的换行符 #

需要匹配输入值里的\n转义字符，并用<br>全局替换（加g修饰符确保替换所有匹配项）。

2. 用innerHTML插入内容 #

innerHTML会解析HTML标签，让<br>生效实现换行，而不是像innerText那样把标签当作纯文本。

修改后的完整代码 #

HTML代码 #

<div id="renderdiv">Some text</div>
<br><br>
<label for="take">Enter text: </label>
<input type="text" name="enter" id="take">

JavaScript代码 #

var data = {"jsontext":"First line\nSecond line"};
var textToAdd = data.jsontext;

var getInput = document.getElementById('take');
var divPrint = document.getElementById('renderdiv');

divPrint.innerText = textToAdd;

getInput.addEventListener('change', function() {
    var nonParsed = this.value.replace(/\\n/g, '<br>');
    divPrint.innerHTML = nonParsed;
});

补充说明 #

如果是处理JSON中直接读取的真实换行符（比如示例里的data.jsontext），直接用divPrint.innerText就能自动识别换行；但输入框手动输入的\n是转义字符，必须先替换为<br>再用innerHTML渲染。

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