处理用户误输入html标签引起的网站布局混乱

今天在做网站的时候,发现只要在产品详情页的产品详细描述(由用户后台编辑)中加入一个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" });
}

这样去除去了主要的几个重要的标签。但是也丢了表格的属性,如果表格有边框,或者有背景,这些都没了。这也是折中的一种方法了。这样就不会引起网站布局混乱了。


如果有更好的方法,请给我联系,继续讨论。

经验在于积累----武二郎
原文地址:https://www.cnblogs.com/zhanghai/p/4461239.html