在textarea中换行的实现方法

小编给大家分享一下在textarea中换行的实现方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

　　html的textarea内容显示的时候怎么换行？输入的时候换了行，但是读取出来的时候是连在一起的，要怎么才可以显示换行？

　　textarea换行方式一：利用pre

　　1、在textarea输出的div中添加如下css样式：

.content{
　　white-space:pre;
　　}

　　2、利用<pre>标签来输出textarea的内容：

　　<pre>这是textarea中的内容....</pre>

　　该方式的优缺点：

　　优点:

　　不需要区别浏览器,正则校验替换,保存输入的符号

　　缺点:

　　但是超出长度部分不会折行显示,在同行显示,需要添加white-space的样式

　　white-space:pre-wrap||pre-line;

　　pre标签样式,可能会改变预期样式字体大小,颜色,字体类型等,需要全局设置初始值

　　textarea换行方式二：将\n\r替换成br标签

　　利用正则，写法如下：

　　input.replace(/\r/ig,'').replace(/\n/ig,'<br/>')

　　注意:需要dangerouslySetInnerhtml:{\_\_html:text}解析。

　　该方式的优缺点：

　　优点:

　　可设置自动换行，可不修改样式,如果统一处理包裹标签有可能会影响

　　缺点:

　　dangerouslySetInnerhtml有XSS漏洞,建议使用htmlescape处理

import_from'lodash';
　　constcreatehtml=encodedhtml=>({
　　__html:encoded(createhtml)
　　});
　　functionencoded(html){
　　return_.escape(html).replace(/\r/g,'').replace(/\n/g,'<br/>')
　　}
　　exportfunctionnewlineReplaceBr(input){
　　if(input){
　　returnh.span({
　　dangerouslySetInnerHTML:createHtml(input)
　　})
　　}
　　else{
　　return''
　　}
　　}

以上是“在textarea中换行的实现方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！