保留多行文本框的換行與空格樣式，並轉義HTML標記的尖括號
本文采用JavaScript進行演示，這並不影響你在項目中的實際應用，因為我提供的思路，你可以輕易地把它用你自己的語言進行實現，這通常是後臺語言，而且下面提供的正則表達式你幾乎可以完全照搬，因為正則表達式是通用的。
作者：WebFlash
出處：http://webflash.cnblogs.com
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
一、需求來源
假如在你的一個網站項目中，你需要提供一個留言入口，你用的只是普通多行文本框（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,"<$1>")).replace(/ /gi," ")).replace(/\n/gi,"<br>");
/*
(1)轉義“<”、“>”
(2)改半角空格為
(3)保留換行
*/
if (document.getElementById("checkbox").checked==true) {
document.getElementById("out").innerHTML=endValue;
}else{
document.getElementById("out").innerHTML=getValue;
}
}//end outHTML function
</script>
</body>
</html>
<1>未啟用轉換效果：
<2>啟用轉換效果：
保留多行文本框的換行與空格樣式，並轉義HTML標記的尖括號