textarea标签中的换行与空格问题
2019獨角獸企業重金招聘Python工程師標準>>>
問題描述：textarea元素中編輯帶有格式的文本，無法按照原格式輸出。舉個例子，一個頁面有textarea元素，一個div，一個按鈕，當點擊按鈕時，將textarea中的值顯示在div中。
<html> <body><textarea cols="10" rows="10"></textarea><div></div><button type="button">點擊</button> </body> </html> <script type="text/javascript">$('button').click(function(){$('div').html($('textarea').val());}) </script>演示效果如圖：
可以看到，在textarea中輸入了3行文字，第3行文字中加了好多空格，可是獲取其value值后顯示在div中是沒有任何格式的。
原因：在textarea中，當我們敲下回車時，實際上是生成了一個換行標記\n。而\n在瀏覽器中渲染時，不具有換行效果。瀏覽器中渲染換行需要<br />標記。所以，我們只需要將textarea中的換行標記\n換成瀏覽器的換行標記<br />即可。同理，空格標記為\s，換成
方法：
①使用JS字符串對象的方法replace
將textarea中所有的\n和\s分別替換成<br />和
<script type="text/javascript">$('button').click(function(){var new_str = $('textarea').val().replace(/\n|\r\n/g,'<br>').replace(/\s/g,' ');$('div').html(new_str);}) </script>效果如圖：
說明：a. replace中第一個參數是正則表達式,以/ /作為開始和結束標記,\n|\r\n表示\n或者\r\n標記，g表示所有的。b. 由于不同操作系統換行標記不同，在windows下是\n，所以采用\n|\r\n進行操作系統換行符的兼容。c. 為什么換成<br>而不換成<br />，大家都可以試試，哪個管用用哪個。有時后者會存在問題，因為結束標記/會被識別成其他含義。
②存入數據庫后用php讀取
我們很少直接將textarea中的數據按格式輸出。它作為表單元素，一般都是要存入數據庫中的，然后在需要的時候調用。
我們首先看看將數據存入數據庫后數據的樣子。
第一個字段的數據類型是varchar，第二個字段的數據類型是text。
可以看出，如果將textarea中的value值儲存在varchar類型中，換行是無效的，而空格會保留；而在text類型中，空格和換行都會保留。
我們試著從數據庫中讀取這2個字段的數據，顯示在div中，發現兩者顯示結果一樣，如圖：
也就是說，不管是什么類型，我們存入數據庫時都可以不做任何處理，直接將textarea的值value值寫入數據庫；而在讀取的時候，同樣將\n等換成對應標記。在php中提供的正則替換方法為：
<?php$patterns = array('/\n|\r\n/','/\s/');$replace = array('<br>',' ');echo preg_replace($patterns, $replace, $row) ; ?>其中$patterns是正則表達式，要進行換行和空格匹配，所以采用數組；$replace是換成怎樣的標記；$row就是儲存在數據庫中的數據。
轉載于:https://my.oschina.net/u/3618644/blog/1548683
總結
以上是生活随笔為你收集整理的textarea标签中的换行与空格问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我的Java开发之路
- 下一篇： sql语句按照汉字拼音首字母排序