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();
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();
}
@{
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>
