JSPM – @hugsmidjan/htmldiff-js@1.3.0

Package Exports

@hugsmidjan/htmldiff-js
@hugsmidjan/htmldiff-js/dist/htmldiff.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hugsmidjan/htmldiff-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Custom fork of HtmlDiff-js

Modified to handle european special characters and pretty formatted numbers.
Includes some minor cleanups and bugfixes. Dropped ancient browser support.

JavaScript port of HtmlDiff.NET which is itself a C# port of the Ruby implementation, HtmlDiff.

Project Description

Diffs two HTML blocks, and returns a meshing of the two that includes <ins> and <del> elements. The classes of these elements are ins.diffins for new code, del.diffdel for removed code, and del.diffmod and ins.diffmod for sections of code that have been changed.

For "special tags" (primarily style tags such as  and ), ins.mod elements are inserted with the new styles.

Further description can be found at this blog post written by Rohland, the author of HtmlDiff.NET.

Note: The diffing algorithm isn't perfect. One example is that if a new  ends in the same string as the previous  tag did, two <ins> tags will be created: one starting at the beginning of the common string in the first  and one in the second  containing all the content up to the point the trailing common string begins. It's a little frustrating, but I didn't write the algorithm (and honestly don't really understand it); I only ported it.

Usage

Html

<html>
<body>
    <div id="oldHtml">
        <p>Some <em>old</em> html here</p>
    </div>

    <div id="newHtml">
        <p>Some <b>new</b> html goes here</p>
    </div>

    <div id="diffHtml">
    </div>
</body>
</html>

JavaScript

import HtmlDiff from 'htmldiff-js';


let oldHtml = document.getElementById('oldHtml');
let newHtml = document.getElementById('newHtml');
let diffHtml = document.getElementById('diffHtml');

diffHtml.innerHTML = HtmlDiff.execute(oldHtml.innerHTML, newHtml.innerHTML);

Demo

I didn't port the demo, but it should output markup the same way the htmldiff.net demo does with a slight exception in what appeared to me to be a bug, which I 'fixed'. I can no longer remember what that bug was, as I only ported this project quickly in order to use it in another project.