Highlight differences between 2 HTML strings

I need to show the differences between 2 HTML documents. I use this library called htmldiff.net to achieve this.

First, install htmldiff.net from nuget package manager.
Then, you can do the following example to get the new HTML string with the differences highlighted.

var oldHtml = "some old html string";
var newHtml = "some new html string";

var diffHelper = new HtmlDiff.HtmlDiff(oldHtml, newHtml );

string htmlDifferences = diffHelper.Build();

var oldHtml = "some old html string";

var newHtml = "some new html string";

var diffHelper = new HtmlDiff.HtmlDiff(oldHtml, newHtml );

string htmlDifferences = diffHelper.Build();

This is what my example looks like in an MVC app

        public virtual ActionResult Index()
        {
            var oldHtml = "some old html string";
            var newHtml = "some new html string";

            var diffHelper = new HtmlDiff.HtmlDiff(oldHtml, newHtml);

            ViewBag.Old = oldHtml;
            ViewBag.New = diffHelper.Build();
            return View();
        }

public virtual ActionResult Index()

{

var oldHtml = "some old html string";

var newHtml = "some new html string";

var diffHelper = new HtmlDiff.HtmlDiff(oldHtml, newHtml);

ViewBag.Old = oldHtml;

ViewBag.New = diffHelper.Build();

return View();

}

@{
    ViewBag.Title = "Home Page";
}
<style type="text/css">
    ins {
        background-color: #cfc;
        text-decoration: none;
    }

    del {
        color: #999;
        background-color: #FEC8C8;
    }
</style>
<div class="row" style="width:100%; padding-top:70px;">
    <div class="col-lg-6" style="border-right: 5px solid LightSteelBlue;">
        @Html.Raw(ViewBag.Old)
    </div>
    <div class="col-lg-6">

        @Html.Raw(ViewBag.New)
    </div>
</div>

ViewBag.Title = "Home Page";

}

ins {

background-color: #cfc;

text-decoration: none;

}

del {

color: #999;

background-color: #FEC8C8;

}

</style>

@Html.Raw(ViewBag.Old)

</div>

@Html.Raw(ViewBag.New)

</div>

Like this post?

Another developer blog

Highlight differences between 2 HTML strings

Leave a Reply Cancel reply