You are starting from to strings of text: the old string and the new string.
Then you want to show just these two strings, in a way that allows the viewer to scan the text quickly, even if it is very long, and quickly see at a glance what the difference is between the two strings.
There are multiple ways to represent this information, commonly referred to as a diff between the two strings.
A way to think about a diff between two strings is as a list of substrings that are either:
- Common (they are both in the old and the new string)
- Deleted (they are only in the old string)
- Inserted (they are only in the new string).
For example if the old string is "The sky is cloudy" and if the new string is "The skies were cloudy", then they can be broken up as
- Common string "The sk"
- Deleted string "y is"
- Inserted string "ies were"
- Common string " cloudy"
The first logical step to showing this information is to compute the diff, i.e. that list of strings that are either common or deleted or inserted. In general the diff between two strings is not unique. For example in the above example it can also trivially be represented as
- Deleted string "The sky is cloudy"
- Inserted string "The skies are cloudy"
But that doesn't really help you. So you want a good diffing algorithm. There are plenty of good ones out there, don't bother inventing one.
Next up is presenting this information. There are two main options and a bunch of refinements.
The first option is to show the two strings side by side, highlight in red the bits of the old string that are deleted, and highlight in green the bits of the new string that are added. I don't have colors or side by side here, but for the above example it would look like:
The sky is cloudy
The skies are cloudy
The next option is to represent everything together, but with red highlight and strikethrough for the deletions and green highlights for the additions. I'm not too fond of this personally but some people prefer it. For example it would look something like this:
y isies are cloudy
Next up refinements: very long common strings, eg something that takes up a whole page, can be abbreviated in both cases to avoid including a lot of information, but it's good practice to allow the user to expand the abbreviated part.