textarea中输入的文本如何带格式保存

最新推荐文章于 2024-01-03 15:28:21 发布

原创最新推荐文章于 2024-01-03 15:28:21 发布 · 6.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#textarea #原格式保存

收录于

HTML 专栏收录该内容

8 篇文章

订阅专栏

博客指出重点是给外层添加<pre>标签，以此来保存空格和换行。通过console.log(str)的结果以及#resultText展示的存储结果，可看到文本保留了原格式。

重点是给外层加<pre>标签，就可以保存空格和换行

<body>
  <div>
    <!-- 原文本 -->
    <textarea id="testText">
      1)sdfasfd
      2)sadfadfa
      3)sdfawer
    </textarea>
    <button>获取带格式文本</button>
    <!-- 存储结果展示 -->
    <div id="resutlText"></div>
  </div>
</body>
<script>
$(document).ready(function () {
  $("button").click(function () {
    //获取带格式的原文本
    var str = $("#testText").html(); 
    console.log(str);
    //将原文本赋值给新的div，重点是在str外层加<pre>标签
    $("#resutlText").html("<pre>"+ str +"</pre>");  
  });
});
</script>

可以看到console.log(str)的结果是保留了原格式的，#resultText展示的存储结果也是带原格式的。