Compare Difference Between Text Using jQuery
File Size: | 3.93 KB |
---|---|
Views Total: | 4801 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An easy-to-use, jQuery based text diff app that compares and highlights the difference between two text documents.
See Also:
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.