Question

I’m trying to create an editable text field in a page which highlights the edits made by the user to the text as it is being edited. For instance, text inserted or changed by the user should appear against a colored background, deletions should be indicated by adding a colored background to the neighboring characters (or maybe some kind of symbol?)… It seems to be much harder than I thought to do this in Javascript, and I am surprised that I couldn’t find any code already implementing such a text field.

Do you know of anything which implements what I’m looking for?

Thanks!

Answer 1

You should have a look at Google’s Diff, Match and Patch libraries for Plain Text which are open source and available in JavaScript among other languages.

Diff demo.