JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/benjamine/JsonDiffPatch/master/src/jsondiffpatch.js"></script>
<script type="text/javascript" src="https://raw.github.com/benjamine/JsonDiffPatch/master/src/diff_match_patch_uncompressed.js"></script>

JavaScript

var a1 = [ 'a', 'b', '1234567' ],
    a2 = [ 'a', 'b', 'google', 'ask' ],
    dmp = new diff_match_patch();

function _difference(a1, a2) {
    return a1.filter(function(i) {return !(a2.indexOf(i) > -1);});
};

function _getArrayPatch(a1, a2) {
    a1 = JSON.stringify(a1);
    a2 = JSON.stringify(a2);
    
    var diff = dmp.diff_main(a1, a2);
    var patch = dmp.patch_make(a1, diff);

    return patch;
}

function _applyArrayPatch(patch, array) {
    array = JSON.stringify(array);
    return JSON.parse(dmp.patch_apply(patch, array)[0]);
}

function _getArraySemanticDiff(a1, a2) { 
    var deletions =  _difference(a1, a2);
    var additions =  _difference(a2, a1);
    
    return [
        [-1, deletions],
        [1, additions]
    ];
}

var patch = _getArrayPatch(a1, a2);
var a1_patched = _applyArrayPatch(patch, a1);
var semanticDiff = _getArraySemanticDiff(a1, a1_patched);

console.log(semanticDiff);