保留多行文本框的换行与空格样式，并转义HTML标记的尖括号
本文采用JavaScript進(jìn)行演示，這并不影響你在項(xiàng)目中的實(shí)際應(yīng)用，因?yàn)槲姨峁┑乃悸?#xff0c;你可以輕易地把它用你自己的語言進(jìn)行實(shí)現(xiàn)，這通常是后臺(tái)語言，而且下面提供的正則表達(dá)式你幾乎可以完全照搬，因?yàn)檎齽t表達(dá)式是通用的。
一、需求來源
假如在你的一個(gè)網(wǎng)站項(xiàng)目中，你需要提供一個(gè)留言入口，你用的只是普通多行文本框（textarea）進(jìn)行留言內(nèi)容的收集，并不喜歡用戶輸入一些HTML標(biāo)記，甚至是腳本。像下面我在douban的影評(píng)發(fā)布一樣，如果你未加入處理，直接存入數(shù)據(jù)庫，最終在頁面輸出顯示的時(shí)候你也直接讀數(shù)據(jù)庫的內(nèi)容，你將看到所有本意要分段的文本連在了一起，如果文本框內(nèi)容還包含HTML標(biāo)記的話，也顯示了效果。相信這并不是你相要的效果，所以得想辦法把textarea中的換行符“\n”換成“<br/>”供頁面最終正常顯示用，相應(yīng)地對(duì)空格（全角空格可以不處理，我發(fā)現(xiàn)163博客就是這樣做的）與HTML標(biāo)記的尖括號(hào)也進(jìn)行轉(zhuǎn)換，這很容易想到用查找替換的方法。
二、優(yōu)化方案
如果在發(fā)布信息的時(shí)候，把\n轉(zhuǎn)成<br/>再存入數(shù)據(jù)庫，這樣在頁面顯示的時(shí)候，就直接讀庫并顯示就行了，但是如果你要編輯之前的信息，你又要把從數(shù)據(jù)庫中讀出來的含有<br/>的內(nèi)容的<br/>轉(zhuǎn)成\n在文檔框（textarea）中才能正常顯示供修改。似乎要處理幾步。
另外一個(gè)辦法就是發(fā)布的時(shí)候不處理，那么這條信息在被編輯的時(shí)候也是無須處理的，但是在頁面顯示之前要把\n轉(zhuǎn)成<br/>，但我認(rèn)為這種方法不夠優(yōu)化，對(duì)程序整體性能有一定影響，因?yàn)檗D(zhuǎn)換要用正則表達(dá)式進(jìn)行替換，是會(huì)讓程序變慢，而且內(nèi)容發(fā)布出去后，很多人閱讀這條信息的時(shí)候，每個(gè)用戶對(duì)服務(wù)器的請(qǐng)求都要進(jìn)行一次轉(zhuǎn)換（除非你在發(fā)布一瞬間生成了靜態(tài)頁），而發(fā)布與編輯的次數(shù)遠(yuǎn)比外面訪問次數(shù)要少的多，所以本人建議采用第一種方法。
三、一個(gè)例子和源碼
下面是我用JavaScript寫的一個(gè)實(shí)驗(yàn)工具，大家可以試試。
源碼下載：文本框保留格式.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="轉(zhuǎn)換輸出"?onclick="outHTML()"?/>
<input?name="checkbox"?type="checkbox"?id="checkbox"?value="checkbox"?checked="checked"?/>
<label?for="checkbox"?style="color:#F00">啟用轉(zhuǎn)換輸出</label>
</form>
<div?id="out"?style="border:1px?solid?#F90;?padding:10px;?background:#FFF8DC;?margin-top:10px">請(qǐng)?jiān)谏厦嫖谋究蜾浫霂TML標(biāo)記的文本測(cè)試！</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)轉(zhuǎn)義“<”、“>”
(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>未啟用轉(zhuǎn)換效果：
<2>啟用轉(zhuǎn)換效果：
轉(zhuǎn)載于:https://www.cnblogs.com/webflash/archive/2009/07/06/1517702.html
總結(jié)
以上是生活随笔為你收集整理的保留多行文本框的换行与空格样式，并转义HTML标记的尖括号的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Debian 4
- 下一篇： html的学习小结（3）:HTML 4.