今天在做网站的时候,发现只要在产品详情页的产品详细描述(由用户后台编辑)中加入一个table标签,则会引起部分布局错乱。
第一个想法,肯定是去除产品详细内容里面的所有标签。这样的话,肯定可以不引起混乱。但是同样,客户的所有样式,图片都将消失,客户体验低到了谷底。这样肯定不行。
第二个想法,给从数据库读取的数据加入进行html编辑,但是这样出来以后,就是一堆源码了,客户体验非常不好。
第三个方法,也就是我要说的。
其实引起布局混乱的也就几个标签,<table>,<tr>,<td>,<div>,不要忘记了还有<tbody>,这样只要用的不恰当,整个网站的布局混乱。
所以首先必须在网站管理后台,也就是客户提交表单后,对数据进行验证,有没有不成对的标签,给补上。一般用富文本控件之类的都会自动补齐。没有的话,也可以用
<html>
<head>
</head>
<body>
<div id="code">
<font><strong>sdfds
</div>
<div id="temp" style="display:none;">
</div>
<script type="text/javascript">
document.getElementById("temp").innerHTML=document.getElementById("code").innerHTML;
alert(document.getElementById("temp").innerHTML);
</script>
</body>
</html>
接下就是展示了,展示的时候套在DIV中,然后用
/// <summary>
/// 去除html标记
/// </summary>
/// <param name="html"></param>
/// <returns></returns>
public static string HtmlFilter(string html)
{
//设置要删除的标记
string[] lable = { "font", "span", "div","p","table","tbody","tr","td","a"};
foreach (string lb in lable)
{
string reg = String.Format(@"</?{0}[^>]*?>", lb);
html = Regex.Replace(html, reg, "", RegexOptions.IgnoreCase);
}
return html;
}
DataTable DT = DBHelper.GetDataTable(sql, par);
for (int i = 0; i < DT.Rows.Count; i++)
{
DT.Rows[i][0] = DBHelper.HtmlFilter(DT.Rows[i][0].ToString(), new string[] { "table", "tbody", "tr", "td", "div" });
}
如果有更好的方法,请给我联系,继续讨论。