Text Comparator Utility using jQuery

• Download source code - 23.1 MB

Introduction

Any reusable component is not only helpful to solve the individual developer's problem but saves time and cost for the whole project/ team. One of the requirements was to build a component which can track the changes made by an admin within the publicly displayed information.

Background

Considering the criticality of such information, it's always necessary for the other admin user/ reviewer to cross-verify the changes and review it properly before publishing it for the intended global audience. Especially, for such scenarios, the usability of any text comparator utility increases to many folds. Here is the working and very simple approach for developing such utility.

Using the Code

The pre-requisites are to download the below mentioned libraries:

1. jQuery plug in, i.e., PrettyTextDiff and
2. Google's diff_match_patch library

Add these library references to the intended HTML document as mentioned below:

<script src="Scripts/jquery.pretty-text-diff.min.js"></script>
<script src="Scripts/diff_match_patch.js"></script>

To track the text differences, which include both addition as well as deletion of any text or character, appropriate color coding approach has been implemented using the styles as mentioned below. It can be used within the same HTML document as well as can be kept in a separate CSS file. Here, in this example, light green color has been used for added text and red color for deleted text from the previous version.

#div1 and #div2 styles are used for different purposes, it helps in scrolling the three column values synchronously, explained in the later part of this article.

<style>
        ins {
            background-color: #c6ffc6;
            text-decoration: none;
        }
        del {
            background-color: #ffc6c6;
        }
        table, h3, input, label {
            margin: 10px;
        }
            table th {
                width: 30%;
            }
        #div1 {
            height: 50px;
        }
        #div2 {
            height: 50px;
        }
</style>

I created a sample HTML document using the table element which has three columns, i.e., Previous Version, Modified Version and to track the difference between the previous two versions in the third column, i.e., Differences.

Here, textarea element has been used to display the text in the first two columns and label element to display the tracked changes as mentioned below:

<div id="container">
        <h3>Text Comparator Utility
        </h3>
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>Previous Version</th>
                    <th>Modified Version</th>
                    <th>Differences</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <textarea id="div1" class="original" style="width: 100%; height: 500px">
                            The blue fox climbing over the mountain followed by the armed villagers.
                            Village was full of brave soldiers capable to handle any dangerous
                            situation. They were not only helping the villagers but also the
                            wild animals freely roaming within the village and could pose a risk
                            to their lives as well. The blue fox climbing over the mountain
                            followed by the armed villagers. Village was full of brave soldiers
                            capable to handle any dangerous situation. They were not only helping
                            the villagers but also the wild animals freely roaming within the village
                            and could pose a risk to their lives as well. The blue fox climbing over
                            the mountain followed by the armed villagers. Village was full of
                            brave soldiers capable to handle any dangerous situation. They were
                            not only helping the villagers but also the wild animals freely roaming
                            within the village and could pose a risk to their lives as well.
                            The blue fox climbing over the mountain followed by the armed villagers.
                            Village was full of brave soldiers capable
                            to handle any dangerous situation.
                            They were not only helping the villagers but also the wild animals
                            freely roaming within the village and could pose a risk to
                            their lives as well.</textarea>
                    </td>
                    <td>
                        <textarea id="div2" class="changed"
                        style="width: 100%; height: 500px">
                            The yellow fox running across the dusty road followed by the
                            unarmed villagers. Village was full of brave people, capable enough
                            to handle this situation. They are trying to help not only the villagers
                            but also the wild animals freely roaming out of the woods and could pose
                            a risk to their lives as well.
                            The yellow fox running across the dusty road
                            followed by the unarmed villagers. Village was full of brave people,
                            capable enough to handle this situation. They are trying to help not only
                            the villagers but also the wild animals freely roaming out of the woods
                            and could pose a risk to their lives as well. The yellow fox running
                            across the dusty road followed by the unarmed villagers. Village was
                            full of brave people, capable enough to handle this situation. They are
                            trying to help not only the villagers but also the wild animals
                            freely roaming out of the woods and
                            could pose a risk to their lives as well.
                            The yellow fox running across the dusty road followed
                            by the unarmed villagers.
                            Village was full of brave people,
                            capable enough to handle this situation.
                            They are trying to help not only the villagers but also the wild animals
                            freely roaming out of the woods and
                            could pose a risk to their lives as well.
                            </textarea>
                    </td>
                    <td>
                        <div>
                            <label id="div3" style="width: 80%;
                            max-height: 500px; overflow-y: auto" class="diff"></label>
                        </div>
                    </td>

                </tr>
            </tbody>
        </table>
        <div>
            <input type='button' class='btn btn-primary' value='Compare' />
        </div>
</div>

input button element to trigger the jQuery/ JavaScript function as mentioned below:

<script>
        $("input[type=button]").click(function () {
            $("#container tr").prettyTextDiff();
        });
</script>

Now, the last functionality to cover the sync scrolling for all the three columns using the below script. It can be combined with the above jQuery function or can be kept as a separate js file.

<script>
        $(document).ready(function () {
            $("#div1").scroll(function () {
                $("#div2").scrollTop($("#div1").scrollTop());
                $("#div3").scrollTop($("#div1").scrollTop());
            });
            $("#div2").scroll(function () {
                $("#div1").scrollTop($("#div2").scrollTop());
                $("#div3").scrollTop($("#div2").scrollTop());
            });
            $("#div3").scroll(function () {
                $("#div1").scrollTop($("#div3").scrollTop());
                $("#div2").scrollTop($("#div3").scrollTop());
            });
        });
</script>

Here, for each overflown column scrolling, the other two columns are bound to reflect the position changes, with the only limitation, if the first column value text length is smaller than the other columns, then other columns have to be scrolled further from their current position. It works perfectly if all the column values are nearly of the same size without much major variations in text length.

Isn't it simple to implement? Keep coding! :)