大家做前端的时候，相信都遇到过，利用多行文本控件 textarea 录入数据，多段落回车换行，但是在页面展示时，换行就不出效果了，有什么办法可以解决呢？

其实在textarea 里面，空格和换行会被保存为/s和/n，如果我们前台输入和前台显示的文字都是在 textarea 里面，其实并不需要做任何处理，你在 textarea 里面编写的样式会按照你之前编辑时候的样式，正确的显示出来。 

那么如果你需要 textarea 编辑提交的文字，从后台返回之后，不是显示在 textarea 里面，那么就需要考虑处理空格和换行啦，下面给大家介绍几种个人觉得最简单的方法。

html代码

随便写一个textarea，我们需要把textarea显示到下方div中，dom示例如下：

<textarea name="" id="textareaid" cols="30" rows="10"></textarea>
<div id="contentshow"></div>

一、JS替换法

直接通过正则全局替换，将\n换行符替换成<br/>标签

<script>
	let temp =  textareaid.value.replace(/\n/g,'<br/>');
	contentshow.html(temp);
</script>

 注：textareaid里面的换行符可以通过indexOf获取

textareaid.value.indexOf("\n")

二、css样式法

直接将textareaid的内容放入div中，只需1行css代码即可，white-space 属性设置如何处理元素内的空白

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

white-space属性介绍：

三、显示在pre标签里面

将 div 替换成 pre 标签，将提交的文本显示在 pre 标签里面。pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，他比较常见的应用就是用来显示代码，在技术网站和博客的页面里面，pre 标签都是用来包裹代码块的。

总结

在上文中我们主要介绍了3种常用“处理textarea中的换行”这方面的相关内容，大家可以结合实际项目需求来使用，希望对大家的学习和工作有所帮助。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11678