<pre id="display"></pre> <script src="../dist/diff.js"></script> <script> var one = 'beep boop', other = 'beep boob blah', color = '', span = null; var diff = Diff.diffChars(one, other), display = document.getElementById('display'), fragment = document.createDocumentFragment(); diff.forEach(function(part){ // green for additions, red for deletions // grey for common parts color = part.added ? 'green' : part.removed ? 'red' : 'grey'; span = document.createElement('span'); span.style.color = color; span.appendChild(document .createTextNode(part.value)); fragment.appendChild(span); }); display.appendChild(fragment); </script> <style> #result { word-wrap: break-word; } </style>