对于用户上传不规划Html而导致页面布局错乱的一简单解决方法

75 阅读 0 评论 50 点赞

我是靠谱客的博主调皮帅哥，最近开发中收集的这篇文章主要介绍对于用户上传不规划Html而导致页面布局错乱的一简单解决方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

现在大多网站中都允许用户使用“Html在线编辑器”类的程序发表日记、评论等，好处当然是可以提供丰富的功能，不过用户的电脑知识有深有浅、素质也是有高有低，也就会出现一些不规则的Html破坏版面。

作为开发人员，也是想近办法屏蔽或修正这些不规则的Html，一般方法就是使用正则表达式进行匹配查找。

有一种破坏版面布局的Html本身并没有使用特殊的标记，只是会缺少开始或结束标签，比如：

< div style ="color:#666;" >
这里是内容
< strong > 这里是加粗的内容 </ strong >

很明显，上面的内容缺少了结束div标签：</div>

我曾在网上搜索验证html内容是否完整的方法，不过没有找到好的方法（有示例说可以用 SgmlReader转成XML，只是我需要的还是Html，这样转来转去会很麻烦）

今天换了一种思考方式：通过判断html内容中的开始div标签与结束div标签的数量是否一致来大概验证html内容的是否不完整，代码如下：

public static string RenderHtml( this HtmlHelper helper, string htmlContent)
        {
            htmlContent = NoScriptText(htmlContent); // 去掉脚本、注释、style、<body>、<html>、<marquee>等特殊字符、标签
             int divLen = 0 ;
             int endDivLen = 0 ;
            MatchCollection m = Regex.Matches(htmlContent, @" (<div>)|(<div .*?>) " , RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.Singleline);
            divLen = m.Count;
            m = Regex.Matches(htmlContent, @" </div> " , RegexOptions.IgnoreCase | RegexOptions.Compiled | RegexOptions.Singleline);
            endDivLen = m.Count;
             if (endDivLen != divLen)
            {
                 if (divLen > endDivLen)
                {
                     for ( int i = 0 ; i < divLen - endDivLen; i ++ )
                    {
                        htmlContent += " </div> " ;
                    }
                }
                 else
                {
                     for ( int i = 0 ; i < endDivLen - divLen; i ++ )
                    {
                        htmlContent = " <div> " + htmlContent;
                    }
                }
            }
             return htmlContent;
        }

调用：