How to compare two pieces of html code and show differences [closed]

Question

Lets suppose I have this 2 htmls

var p1 ="<h1>Title</h1>";
var p2 = "<h2>Title changed</h2>";

I need to generate an email with a visual difference, just something like what source control systems do with the content changed/added/deleted.

Basically the email needs to say what changed, what was added, what was deleted.

Obviosly the htmls will be more complex, I just wanted to illustrate what I need to do.

However, I am not sure, at what direction should I look, what are my options?

Answer 1

You could use John Resig's algorithm to compare two strings: http://ejohn.org/projects/javascript-diff-algorithm/

Just download and include jsdiff.js in your script and run it like this:

var p1 ="<h1>Title</h1>";
var p2 = "<h2>Title changed</h2>";

document.body.innerHTML = diffString(p1, p2);