Demo of jQuery.PrettyTextDiff

https://github.com/arnab/jQuery.PrettyTextDiff

HTML

<script src="http://google-diff-match-patch.googlecode.com/svn/trunk/javascript/diff_match_patch.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="wrapper">
     <h3>
        Demo of
        <a href="https://github.com/arnab/jQuery.PrettyTextDiff" target="_blank">
            jQuery.PrettyTextDiff
        </a>
    </h3>

    <table class="table table-striped table-bordered table-hover">
        <thead>
            <tr>
                <th>Original</th>
                <th>Changed</th>
                <th>Diff</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="original">This si text 1</td>
                <td class="changed">This is text one</td>
                <td class="diff1"></td>
            </tr>
            <tr>
                <td class="original">Today is Jan the 24th, 2013</td>
                <td class="changed">Today is January the 25th of the year 2013</td>
                <td class="diff1"></td>
            </tr>
            <tr>
                <td class="original">A mouse is here</td>
                <td class="changed">A sofa is here</td>
                <td class="diff1"></td>
            </tr>
            <tr>
                <td >Some text here.</td>
                <td >Some more text which can be passed to this function.</td>
                <td class="diff2"></td>
            </tr>
         </tbody>
    </table>
    <div>
        <label class="checkbox">
            <input id="cleanup" type="checkbox" value="true" checked="checked" />
            Clean up diff - read more about
            <code>diff_cleanupEfficiency</code>
            <a href="http://code.google.com/p/google-diff-match-patch/wiki/API"
            target="_blank">
                here
            </a>
        </label>

        <input type='button1' class='btn btn-primary' value='Diff - CSS selector'></input>
        <input type='button2' class='btn...

SCSS

ins {
    background-color: #c6ffc6;
    text-decoration: none;
}

del {
    background-color: #ffc6c6;
}

div, table, h3, input, label {
    margin: 10px;
}

table th {
    width: 30%;
}

JavaScript

(function() {
  var $;

  $ = jQuery;

  $.fn.extend({
    prettyTextDiff: function(options) {
      var dmp, settings;
      settings = {
        originalContainer: ".original",
        changedContainer: ".changed",
        diffContainer: ".diff",
        cleanup: true,
        debug: false
      };
      settings = $.extend(settings, options);
      $.fn.prettyTextDiff.debug("Options: ", settings, settings);
      dmp = new diff_match_patch();
      return this.each(function() {
        var changed, diff_as_html, diffs, original;
        original = $(settings.originalContainer, this).text();
        $.fn.prettyTextDiff.debug("Original text found: ", original, settings);
        changed = $(settings.changedContainer, this).text();
        $.fn.prettyTextDiff.debug("Changed  text found: ", changed, settings);
        diffs = dmp.diff_main(original, changed);
        if (settings.cleanup) {
          dmp.diff_cleanupSemantic(diffs);
        }
        $.fn.prettyTextDiff.debug("Diffs: ", diffs, settings);
        diff_as_html = $.map(diffs, function(diff) {
          return $.fn.prettyTextDiff.createHTML(diff);
        });
        $(settings.diffContainer, this).html(diff_as_html.join(''));
        return this;
      });
    }
  });

  $.fn.prettyTextDiff.debug = function(message, object, settings) {
    if (settings.debug) {
      return console.log(message, object);
    }
  };

  $.fn.prettyTextDiff.createHTML = function(diff) {
    var data, html, operation, pattern_amp, pattern_gt, pattern_lt, pattern_para, text;
    html = [];
    pattern_amp = /&/g;
    pattern_lt = /</g;
    pattern_gt = />/g;
    pattern_para = /\n/g;
    operation = diff[0], data = diff[1];
    text = data.replace(pattern_amp, '&amp;').replace(pattern_lt, '&lt;').replace(pattern_gt, '&gt;').replace(pattern_para, '<br>');
    switch (operation) {
      case DIFF_INSERT:
        return '<ins>' + text + '</ins>';
      case DIFF_DELETE:
        return '<del>' + text + '</del>';
      case...