If you have two HTML trees that are nearly identical and you want to highlight differences, jsHTMLDiff is there for you. Check out my blog article for the explanation of the algorithm.
Just include the htmldiff.js file. No dependencies.
We have two tooltips of the same World of Warcraft items from two different patches.
In order to highlight what changed, you just need to do the following:
new HTMLDiff( document.getElementById('old-tooltip'), document.getElementById('new-tooltip') ).diff();
It will wrap
<ins> tags around words that have changed.
- jsHTMLDiff will only catch differences inside text nodes. If there are changes in the html attributes (image
srcfor example), they will not be taken into account.
- Do not put litteral
</ins>inside a text node.
- The diff algorithm is applied on words. Words are obtained using
split(' '). As a consequence, a punctuation change will not only highlight the punctuation but also the previous word.