如何在更新div内容时保留HTML标记？

要实现将textarea内容复制到div并保留HTML标记和换行，需要针对性处理两个核心问题：HTML标签的解析和换行符的转换，以下是具体方案：

问题根源 #

• .text() 方法会将所有内容转义为纯文本，HTML标签会以字符串形式显示而非渲染；
• .html() 能解析HTML标签，但textarea中的换行符是\n，div无法识别该换行格式，需要转换为HTML的<br>标签。

实现代码 #

修改后的JavaScript #

function updateDiv() {
  var content = $('#textarea').val();
  // 将换行符转换为HTML换行标签，同时保留原有HTML标记
  var formattedContent = content.replace(/\n/g, '<br>');
  $('#div').html(formattedContent);
}

完整HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
  <textarea id="textarea" style="height: 50px;"></textarea>
  <button type="button" onclick="updateDiv()">Submit</button>
</form>
<div style="height: 50px;"></div>
<div id="div" style="border: 1px solid gray; height: 50px;"></div>

说明 #

1. 首先通过.val()获取textarea的原始内容，其中包含HTML标签和\n换行符；
2. 使用正则表达式/\n/g全局匹配所有换行符，替换为<br>标签，确保div能识别换行；
3. 最后用.html()方法将处理后的内容插入div，此时HTML标签会被正常渲染，换行也能显示。

如果需要保留textarea中的空格缩进，可以额外添加CSS样式到目标div：

#div {
  white-space: pre-wrap;
}

这样即使不替换\n为<br>，也能保留换行和空格，但HTML标签仍需通过.html()解析。

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