4

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?

Improve this question
8
  • 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. Commented Dec 15, 2014 at 11:32
  • People are voting to close the question because questions asking to recommend tools are off-topic in stackoverflow... Commented Dec 15, 2014 at 11:36
  • 1
    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. Commented Dec 15, 2014 at 11:45
  • 1
    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. Commented Dec 15, 2014 at 11:59
  • 1
    Yep, and you have still failed to disclose which article of the policy you find me to be in breach of. Grandstanding. Commented Dec 15, 2014 at 12:02

2 Answers 2

Reset to default
6

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks, I'll have a look at that!
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... sharejs.org
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!
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/

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.