Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
src
 
 
 
 
 
 

README.md

jsHTMLDiff

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.

Installation

Just include the htmldiff.js file. No dependencies.

<script src="https://raw.github.com/vjeux/jsHTMLDiff/master/lib/htmldiff.js"></script>

Example

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.

Caveats

  • jsHTMLDiff will only catch differences inside text nodes. If there are changes in the html attributes (image src for example), they will not be taken into account.
  • Do not put litteral <ins> or </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.

About

Diff between two HTML fragments

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.