textarea標籤中的換行與空格問題

時間 2019-12-26

標籤 textarea 標籤換行空格問題简体版

原文原文鏈接

問題描述：textarea元素中編輯帶有格式的文本，沒法按照原格式輸出。舉個例子，一個頁面有textarea元素，一個div，一個按鈕，當點擊按鈕時，將textarea中的值顯示在div中。javascript

<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>

演示效果如圖：php

能夠看到，在textarea中輸入了3行文字，第3行文字中加了好多空格，但是獲取其value值後顯示在div中是沒有任何格式的。html

緣由：在textarea中，當咱們敲下回車時，其實是生成了一個換行標記\n。而\n在瀏覽器中渲染時，不具備換行效果。瀏覽器中渲染換行須要 標記。因此，咱們只須要將textarea中的換行標記\n換成瀏覽器的換行標記 便可。同理，空格標記爲\s，換成 java

方法：正則表達式

①使用JS字符串對象的方法replace數據庫

將textarea中全部的\n和\s分別替換成 和 windows

<script type="text/javascript">
   $('button').click(function(){
        var new_str = $('textarea').val().replace(/\n|\r\n/g,'<br>').replace(/\s/g,'&nbsp;');
        $('div').html(new_str);
   })
</script>

效果如圖：數組

說明：a. replace中第一個參數是正則表達式,以/ /做爲開始和結束標記,\n|\r\n表示\n或者\r\n標記，g表示全部的。b. 因爲不一樣操做系統換行標記不一樣，在windows下是\n，因此採用\n|\r\n進行操做系統換行符的兼容。c. 爲何換成 而不換成 ，你們均可以試試，哪一個管用用哪一個。有時後者會存在問題，由於結束標記/會被識別成其餘含義。瀏覽器

②存入數據庫後用php讀取spa

咱們不多直接將textarea中的數據按格式輸出。它做爲表單元素，通常都是要存入數據庫中的，而後在須要的時候調用。

咱們首先看看將數據存入數據庫後數據的樣子。

第一個字段的數據類型是varchar，第二個字段的數據類型是text。

能夠看出，若是將textarea中的value值儲存在varchar類型中，換行是無效的，而空格會保留；而在text類型中，空格和換行都會保留。

咱們試着從數據庫中讀取這2個字段的數據，顯示在div中，發現二者顯示結果同樣，如圖：

也就是說，無論是什麼類型，咱們存入數據庫時均可以不作任何處理，直接將textarea的值value值寫入數據庫；而在讀取的時候，一樣將\n等換成對應標記。在php中提供的正則替換方法爲：

<?php
	$patterns = array('/\n|\r\n/','/\s/');
	$replace = array('<br>','&nbsp');
	echo preg_replace($patterns, $replace, $row) ;
?>

其中$patterns是正則表達式，要進行換行和空格匹配，因此採用數組；$replace是換成怎樣的標記；$row就是儲存在數據庫中的數據。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。