https://github.com/vjeux/jshtmldiff

Diff between two HTML fragments
https://github.com/vjeux/jshtmldiff

Last synced: about 1 month ago
JSON representation

Diff between two HTML fragments

• Host: GitHub
• URL: https://github.com/vjeux/jshtmldiff
• Owner: vjeux
• Created: 2012-01-13T11:26:35.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2012-01-13T14:12:39.000Z (almost 13 years ago)
• Last Synced: 2024-04-14T15:07:23.540Z (9 months ago)
• Homepage:
• Size: 93.8 KB
• Stars: 12
• Watchers: 6
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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](http://blog.vjeux.com/2011/project/world-of-warcraft-html-tooltip-diff.html) for the explanation of the algorithm.

Installation

============

Just include the htmldiff.js file. No dependencies.

```html

```

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:

```javascript

new HTMLDiff(

  document.getElementById('old-tooltip'),

  document.getElementById('new-tooltip')

).diff();

```

It will wrap `````` 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 `````` or `````` 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.