保留多行文本框的换行与空格样式，并转义HTML标记的尖括号
本文采用JavaScript進行演示，這并不影響你在項目中的實際應用，因為我提供的思路，你可以輕易地把它用你自己的語言進行實現，這通常是后臺語言，而且下面提供的正則表達式你幾乎可以完全照搬，因為正則表達式是通用的。
一、需求來源
假如在你的一個網站項目中，你需要提供一個留言入口，你用的只是普通多行文本框（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>啟用轉換效果：
轉載于:https://www.cnblogs.com/webflash/archive/2009/07/06/1517702.html
總結
以上是生活随笔為你收集整理的保留多行文本框的换行与空格样式，并转义HTML标记的尖括号的全部內容，希望文章能夠幫你解決所遇到的問題。
