2

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?

Community
  • 1
  • 1
Tim Ogilvy
  • 1,923
  • 1
  • 24
  • 36
  • Why are people voting to close the question? At least leave a comment as to your reason. Otherwise I think I could be forgiven for seeing it as rude. – Tim Ogilvy Dec 15 '14 at 11:32
  • People are voting to close the question because questions asking to recommend tools are off-topic in stackoverflow... – T J Dec 15 '14 at 11:36
  • Off topic in what way? I mean I would be happy for someone to show me a vanilla JavaScript solution if there's a simple one. I find this confusing. – Tim Ogilvy Dec 15 '14 at 11:37
  • Yep, I'm happy to conclude, that it is plain rude. If you want to go around down-voting things, have the basic courtesy to provide meaningful feedback. – Tim Ogilvy Dec 15 '14 at 11:45
  • Read this first http://stackoverflow.com/help/on-topic. You'll be able to find many related discussions in [Meta](http://meta.stackoverflow.com/). Nobody is being rude to you. If you have a problem with the policy, contact stackexchange. – T J Dec 15 '14 at 11:56
  • If you are just trotting around enforcing the rules so that your personal sense of importance is fulfilled, I hope that provides you with the completeness in life you so evidently require. Here amongst the humans, it is considered courteous to provide (appropriate,explicit) feedback. – Tim Ogilvy Dec 15 '14 at 11:59
  • I voted to close the question and I gave you my feedback. I found your question from close votes queue. I am not interested in wasting my time with this. – T J Dec 15 '14 at 12:01
  • Yep, and you have still failed to disclose which article of the policy you find me to be in breach of. Grandstanding. – Tim Ogilvy Dec 15 '14 at 12:02

2 Answers2

3

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.

sifriday
  • 4,342
  • 1
  • 13
  • 24
  • Thanks, I'll have a look at that! – Tim Ogilvy Dec 15 '14 at 11:38
  • If you're feeling ambitious there's a gret library here that will give you the basis for doing real-time editing like a Google Document, so your editors can work concurrently. I've not tried this library but would love to give it a go sometime... http://sharejs.org/ – sifriday Dec 15 '14 at 11:48
  • that does look like fun! Also you broke my google keyword drought, so thanks to you and a cup of tea, I'm back on my way to getting this one completed. Cheers! – Tim Ogilvy Dec 15 '14 at 11:54
0

Also for completeness, there was this:

Question: JavaScript based diff utility

and another tool:

https://github.com/cemerick/jsdifflib

and this gizmo

http://prettydiff.com/

Community
  • 1
  • 1
Tim Ogilvy
  • 1,923
  • 1
  • 24
  • 36