Demo of jQuery.PrettyTextDiff

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

by sswblarrion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-prettytextdiff/jquery.pretty-text-diff.min.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>
        <div class="form-group" style="margin-bottom:0; margin-top: 0;">
            <label class="control-label" style="margin:0">
                MODE:
            </label>

            <label class="radio-inline" style="margin-top: -5px;">
                <input type="radio" name="mode" value="DEFAULT" checked...

SCSS

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

del {
    background-color: #ffc6c6;
}

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

table th {
    width: 30%;
}

JavaScript

$("input[type=button1]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        mode: $('input[name="mode"]:checked').val(),
        cleanup: $("#cleanup").is(":checked"),
        diffContainer: ".diff1"
    });
});

$("input[type=button2]").click(function () {
    $("#wrapper tr").prettyTextDiff({
        mode: $('input[name="mode"]:checked').val(),
        cleanup: $("#cleanup").is(":checked"),
        originalContent: "Some text here.",
        changedContent: "Some more text which can be passed to this function.",
        diffContainer: ".diff2"
    });
});















/*
@preserve jQuery.PrettyTextDiff 1.0.5
See https://github.com/arnab/jQuery.PrettyTextDiff/
 */
(function(){var $,diff_wordsToChars;$=jQuery;diff_wordsToChars=function(text1,text2){var lineArray,wordHash,wordsToChars;wordsToChars=function(text){var chars,word,wordEnd,wordStart;chars="";wordStart=0;while(wordStart<text.length){wordEnd=text.indexOf(" ",wordStart);if(wordEnd===-1){wordEnd=text.length-1}word=text.substring(wordStart,wordEnd+1);wordStart=wordEnd+1;if(wordHash.hasOwnProperty(word)){chars+=String.fromCharCode(wordHash[word])}else{wordHash[word]=lineArray.length;lineArray.push(word);chars+=String.fromCharCode(lineArray.length-1)}}return chars};lineArray=[""];wordHash={};return[wordsToChars(text1),wordsToChars(text2),lineArray]};$.fn.extend({prettyTextDiff:function(options){var dmp,settings;settings={mode:"DEFAULT",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,fragments,mode,original;if(settings.originalContent&&settings.changedContent){original=$("<div />").html(settings.originalContent).text();changed=$("<div...