js换行符 - 对textarea换行符的处理方案

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

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

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

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

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

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

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

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

textareaid.value.indexOf("\n")

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

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

white-space属性介绍：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

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

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