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