Simple Text Comparison Tool

I know there are many such tool for such process, many of them online. My favorite site is DiffNow. Main issue that the site limits the number of comparison you are allowed to use per day. Other site/tool have some logic issues. I think if you will try to develop such tool, you might discover that it cannot be perfect. You will always have the special case that your logic doesn't parse perfectly.
I came to such need, and indeed find the difficulties in such process.
Main target of this article is to assist you with the design.
Finally you can test it with this link.

Design
At first you probably thinking lets start with the basic - loop over the lines per their numbers, if the line from the first file (file1) not exists in the second file (file2) then the line was removed, if it in the other position the line was added, if lines are different it was modified.

However, next you came to some other issues that need more than a the basic design:
Issue: If a new line was added at start, then it re-positioning all the other lines, and then you cannot compare the rest of the files line by line (otherwise it will find that all lines were modified).
Solution: Identify those cases in advance that lines removed/added and add "empty line" in the relevant file, in order to keep the lines in both files align as possible.

Issue: In many cases there are only differences in indentation (space, tab, etc) due to different editors. How your tool should handle those cases?
Solution: I decided that during comparing each 2 line I will check if lines are equals using trim function, in such case need to mark those line in special color.

Issue: In case line was modified, am I simply going to highlight this line or should I highlight the specific change (word(s)) ?
Solution/Decision: In my solution in case 2 lines found different, the program calculate number of different words. In case only 1 word is the different it mark only this words, but in other cases it mark the whole lines.

Screen
User will enter 2 text and press compare button. This will run the compare logic and show in output the 2 files that in each there are some marks for the changed lines. I decided to mark in red line that was exists at file1 but not exists in file2 (line was removed), green is the opposite (line was added), cyan indicate line that was changed, and grey will indicate "dummy" line that there just to keep the alignment between the 2 files.

Few Addition Points:
-Should handle the scroll functionality:
Add navigation buttons next to each file (I used "<<" and ">>"). To support this need to setup the Id attribute per each changed section in some specific format, later you can use JS code to navigate to each change according to the format you decided.
When user scroll in 1 file, the page should automatically scroll the other file, this way the user always see the same section in both files.

-Add lines numbers as user will probably want to know the lines number that was changed.
This part, obviously, need to be done after the compare logic, as you don't want that the lines number will be part of the compare.

-Summary details: it is a good idea to show some summary information (e.g. total lines that was removed, total added, etc), this means that during the compare logic need to count the changes.


Simple Compare Tool.