保留多行文本框的換行與空格樣式,並轉義HTML標記的尖括號

假如在你的一個網站項目中,你需要提供一個留言入口,你用的只是普通多行文本框(textarea)進行留言內容的收集,並不喜歡用戶輸入一些HTML標記,甚至是腳本。像下面我在douban的影評發佈一樣,如果你未加入處理,直接存入數據庫,最終在頁面輸出顯示的時候你也直接讀數據庫的內容,你將看到所有本意要分段的文本連在了一起,如果文本框內容還包含HTML標記的話,也顯示了效果。相信這並不是你相要的效果,所以得想辦法把textarea中的換行符“/n”換成“<br/>”供頁面最終正常顯示用,相應地對空格(全角空格可以不處理,我發現163博客就是這樣做的)與HTML標記的尖括號也進行轉換,這很容易想到用查找替換的方法。

二、優化方案

如果在發佈信息的時候,把/n轉成<br/>再存入數據庫,這樣在頁面顯示的時候,就直接讀庫並顯示就行了,但是如果你要編輯之前的信息,你又要把從數據庫中讀出來的含有<br/>的內容的<br/>轉成/n在文檔框(textarea)中才能正常顯示供修改。似乎要處理幾步。

另外一個辦法就是發佈的時候不處理,那麼這條信息在被編輯的時候也是無須處理的,但是在頁面顯示之前要把/n轉成<br/>,但我認爲這種方法不夠優化,對程序整體性能有一定影響,因爲轉換要用正則表達式進行替換,是會讓程序變慢,而且內容發佈出去後,很多人閱讀這條信息的時候,每個用戶對服務器的請求都要進行一次轉換(除非你在發佈一瞬間生成了靜態頁),而發佈與編輯的次數遠比外面訪問次數要少的多,所以本人建議採用第一種方法。

三、一個例子和源碼

下面是我用JavaScript寫的一個實驗工具,大家可以試試。

源碼下載:文本框保留格式.rar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本框保留格式 ucoolweb.com</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<textarea name="textContent" cols="100" rows="15" id="textContent"></textarea>
<br />
<input type="button" name="Submit" value="轉換輸出" onclick="outHTML()" />
<input name="checkbox" type="checkbox" id="checkbox" value="checkbox" checked="checked" />
<label for="checkbox" style="color:#F00">啓用轉換輸出</label>
</form>
<div id="out" style="border:1px solid #F90; padding:10px; background:#FFF8DC; margin-top:10px">請在上面文本框錄入帶HTML標記的文本測試!</div>
<script type="text/javascript">
/**********************************************************
* author Tang Guohui, created: 2007-12-9 12:30:15
**********************************************************/
function outHTML() {
var getValue=document.getElementById("textContent").value;
var endValue=((getValue.replace(/<(.+?)>/gi,"&lt;$1&gt;")).replace(/ /gi,"&nbsp;")).replace(//n/gi,"<br>");
/*
(1)轉義“<”、“>”
(2)改半角空格爲&nbsp;
(3)保留換行
*/

if (document.getElementById("checkbox").checked==true) {
document.getElementById("out").innerHTML=endValue;
}else{
document.getElementById("out").innerHTML=getValue;
}

}//end outHTML function
</script>
</body>
</html>

轉自:http://blog.csdn.net/webflash/article/details/4297811
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章