Javascript tool/library to detect and display changes in text using javascript in the browser, like git diff? [closed]

Question

For a client's intranet HR section user profile approvals, to fast-track managers approving changes to a user profile, we would like to be able to clearly display changed text.

I'd love to have something like git's diff, or even the edit engine that's used here on stack overflow. I'm not sure if that happens client side, but I would like to be doing it client side.

I had a bit of a google around but unfortunately the keywords attract a plethora of crufty non-answers. I imagine there's something out there... but I am neither Scully nor Mulder and time is of the essence.

(Context: a basic LAMP stack with data from database.)

Example:

1. After many years of experience working for the competition, I joined our wonderful firm.
   
   
2. After many years of experience working for the constipation, I joined our dodgey firm.

Display:

After many years of experience working for the constipation, I joined our dodgey firm.

Obviously strikeout or colour is better, but not avaliable here.

Does any kindly soul know of such a library, or have a gizmo they would like to share?

Answer 1

diff is a *nix tool as well as a git tool so it is a good keyword to help you with your search; 'javascript diff' throws up a few things and this looks good:

https://github.com/kpdecker/jsdiff

They give this example for in-browser diff:

<pre id="display"></pre>
<script src="diff.js"></script>
<script>
var one = 'beep boop';
var other = 'beep boob blah';

var diff = JsDiff.diffChars(one, other);

diff.forEach(function(part){
  // green for additions, red for deletions
  // grey for common parts
  var color = part.added ? 'green' :
    part.removed ? 'red' : 'grey';
  var span = document.createElement('span');
  span.style.color = color;
  span.appendChild(document
    .createTextNode(part.value));
  display.appendChild(span);
});
</script>

and the output it produces looks like what you need.