Compare Difference Between Text Using jQuery

An easy-to-use, jQuery based text diff app that compares and highlights the difference between two text documents.

See Also:

• 10 Best Image Comparison Tools In JavaScript

How to use it:

1. Create two textarea elements where you can insert text to be compared.

<textarea required id="refSentence">
  Refence Sentence
</textarea>

<textarea required id="mySentence">
  My Sentence
</textarea>

2. Create a button to find the difference between text.

<button type="button" id="submit" onclick="buttonClick()">
  Find Difference
</button>

3. Create an output container to hold the results.

<code id="output"></code>

4. Load the main JavaScript app.js after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="app.js"></script>

5. Apply your own CSS styles to the text based on additions and deletions but also shifts of words.

.new {
  color: green;
}

.del {
  text-decoration: line-through;
  color: red;
}

.shifted {
  color: darkblue;
}

.normal {
  color: gray;
}

---

This awesome jQuery plugin is developed by mujtabachang. For more Advanced Usages, please check the demo page or visit the official website.