在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中換行的實現方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！