Demo of jQuery.PrettyTextDiff

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

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/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 <br/>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<br/>text</td>
                <td class="changed">A sofa is here<br/>text</td>
                <td class="diff1"></td>
            </tr>
            <tr>
              <td class="columnText original">
              Dog Days''
              </td>
              <td class="columnText changed">
              Dog Days''</td>
              <td class="columnText 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"...

SCSS

pre.diff-result{
  background-color: transparent;
  border:0;
  border-radius:0;
  margin:0;
  padding:0;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
}
pre.diff-result ins {
  background-color: #c6ffc6;
  text-decoration: none;
}

pre.diff-result del {
  background-color: #ffc6c6;
  text-decoration: none;
}

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

table th {
  width: 33%;
}

JavaScript

// Generated by CoffeeScript 1.7.1

/*
@preserve jQuery.PrettyTextDiff 1.0.4
See https://github.com/arnab/jQuery.PrettyTextDiff/
 */

(function() {
  let $;

  $ = jQuery;

  function diff_charsToLines(a, b){
    function c(a){
      for(var b = "", c = 0, f = -1, g = d.length; f < a.length - 1;){
        f = a.indexOf(" ", c);
        -1 == f && (f = a.length - 1);
        var r = a.substring(c, f + 1), c = f + 1;
        (e.hasOwnProperty ? e.hasOwnProperty(r) : void 0 !== e[r]) ? b += String.fromCharCode(e[r]) : (b += String.fromCharCode(g),
          e[r] = g,
            d[g++] = r);
      }
      return b;
    }
    var d = [], e = {};
    d[0] = "";
    var f = c(a), g = c(b);
    return {
      chars1: f,
      chars2: g,
      lineArray: d
    };
  }
  $.fn.extend({
    prettyTextDiff: function(options) {
      let 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() {
        let changed, diff_as_html, diffs, original, containers;
        if (settings.originalContent || settings.changedContent) {
          original = $('<i />').text(settings.originalContent || '').text();
          changed = $('<i />').text(settings.changedContent || '').text();
        } else {
          containers = true;
          original = $('<i>'+$(settings.originalContainer, this).html()?.replace(/^\s+|\s+$/g, '').replace(/<br\s*\/?>/gi, '\n')+'</i>').text();
          changed = $('<i>'+$(settings.changedContainer, this).html()?.replace(/^\s+|\s+$/g, '').replace(/<br\s*\/?>/gi, '\n')+'</i>').text();
        }
        $.fn.prettyTextDiff.debug("Original text found: ", original, settings);
        $.fn.prettyTextDiff.debug("Changed  text found: ", changed,...