Netdiff - A JavaScript Based File Comparison Utility

Lately I have been interested in developing an internet application built in pure JavaScript to provide a service that does not rely on post backs to a server to process logic. The project I have been working on is NetDiff, which is a pure JavaScript based file comparison utility.

There are some challenges in doing such an application in JavaScript. One of the first ones I discovered, because of security considerations, was the finding and loading of the files I wanted to compare. There is no such direct mechanism to do this. I did find examples and suggestions of using ActiveX to read files, but that would have limited me to Internet Explorer. I also tried uploading the files using the input file tag with some additional JavaScript hocus pocus. I would use the browse functionality to locate the file and provide the path. Once I located both files, I would click a button which would copy the paths to a set of hidden IFrames and have it load the file contents for me. After it loaded, I would then read the contents of the hidden IFrame and store it in a JavaScript string. The issue with that was you can only read the contents of those IFrame if the source came from the same location as the main html page. So, it wouldn’t work either. So I just decided to have the users paste in the contents of the files and compare from there.

The other issue, I guess it wasn’t that bad, was encoding the lines from the document correctly so it would display in HTML. That included the common culprits of ‘less than’ and 'greater than’ along with trying to maintain tabs from the original document.

The core of the algorithm is finding the longest common sequence (LCS) of the files. Once you find that, the files can be aligned along that sequence. After that you move in a recursive manner to find the next LCS above and below the one you just aligned the files on. I learned about this algorithm from this post: A Fast Diff Algorithm in Visual Basic .Net.

I chose Microsoft’s windiff as the model on how to display the file comparison results to the user. I know some people like it, and others hate it. It was just a fairly simple and familiar model to follow.

Please follow this link to check out NetDiff.