DiffMatchPatch

An example of usage of Google's DiffMatchPatch based on https://neil.fraser.name/software/diff_match_patch/svn/trunk/demos/demo_diff.html

by Alvaro Flaño

HTML

<script src="https://neil.fraser.name/software/diff_match_patch/svn/trunk/javascript/diff_match_patch.js"></script>
<form action="#" onsubmit="return false">
  <table width="100%">
    <tbody>
      <tr>
        <td width="50%">
          <h3>Text Version 1:</h3>
          <textarea id="text1" style="width: 100%" rows="10">Tracker.Dependency.prototype.changed = function () {
  for (var id in this._dependentsById)
    this._dependentsById[id]._compute();
};</textarea>
        </td>
        <td width="50%">
          <h3>Text Version 2:</h3>
          <textarea id="text2" style="width: 100%" rows="10">Tracker.Dependency.prototype.changed = function () {
  for (var id in this._dependentsById)
    this._dependentsById[id]._compute();
};

Tracker.autorun = function (f) {
  constructingComputation = true;
  var c = new Tracker.Computation(f);
  return c;
};</textarea>
        </td>
      </tr>
    </tbody>
  </table>

  <p>
    <input type="button" onclick="launch()" value="Compute Diff">
  </p>
</form>

<div id="outputdiv"></div>

JavaScript

var dmp = new diff_match_patch();

function launch() {
  var text1 = document.getElementById('text1').value;
  var text2 = document.getElementById('text2').value;
  
  var d = dmp.diff_main(text1, text2);
	
  console.log(d);
  
  var ds = dmp.diff_prettyHtml(d);
  document.getElementById('outputdiv').innerHTML = ds;
}