dfoverdx / htmldiff-js Goto Github PK

JavaScript port of htmldiff.net (http://github.com/Rohland/htmldiff.net)

License: Other

JavaScript 100.00%

htmldiff-js's Introduction

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 <em> and <strong>), 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 <p> ends in the same string as the previous <p> tag did, two <ins> tags will be created: one starting at the beginning of the common string in the first <p> and one in the second <p> 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.

htmldiff-js's People

Contributors

Stargazers

Watchers

htmldiff-js's Issues

Weird diff output

I can't explain output of this diff.
Demo: https://stackblitz.com/edit/js-qgd6he?file=index.js,index.html

<div id="oldHtml">
<div>beepa boop</div>
<div>beedp boop</div>
</div>

<div id="newHtml">
<div>beep boop</div>
<div>beep boop</div>
<div>beep boop</div>
</div>

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

Output:

In the new HTML I

removed "a" from first div
removed "d" from second div
added new div

But the output doesn't correspond to what I wrote above. Check the diff for the last div for example, it says only half contents of the div was added.

IE11

Hi there,

Thanks for the useful code. I used it on a site which requires IE11 support, and I had to make a few changes - the Action object uses "delete" as a property name, which is reserved, and I needed to change the presets a bit.

I have a patch if you want it, but you might be intentionally sticking to newer browser.

Edward

Import error

I am getting following error

import HtmlDiff from 'htmldiff-js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Node version v14.15.4

<p>

Thanks for the contribution of the author. I have a good idea to deal with the problem of

tags.
the problem may be caused by incomplete regular matching, I found that thetag has a similar problem,

so it can be solved in this way.replace the label with regular before comparison

toHtml(text) { var reg1 = /<p/g; var reg2 = /<\/p>/g; var reg3 = /<strong/g; var reg4 = /<\/strong>/g; text = text.replace(reg1, "<div class='type-p' "); text = text.replace(reg2, "</div><div class='end-p'></div>"); text = text.replace(reg3, "<div class='type-strong' "); text = text.replace(reg4, "</div><div class='end-strong'></div>"); return text; }, diffhtml = HtmlDiff.execute(this.toHtml(actionData),this.toHtml(newData))

replaced after comparison

toEditor(text) { // 在转换后把p标签和strong标签换回来 var reg5 = /<div class='type-p' /g; var reg6 = /<\/div><div class=\'end-p\'><\/div>/g; var reg7 = /<div class='type-strong' /g; var reg8 = /<\/div><div class=\'end-strong\'><\/div>/g; text = text.replace(reg5, "<p"); text = text.replace(reg6, "</p>"); text = text.replace(reg7, "<strong"); text = text.replace(reg8, "</strong>"); return text; }, diffhtml = this.toEditor(diffhtml)

Can't create new build after modifying code in htmldiff-js node module library

I'm trying to check one functionality by modifying in library file, But for that create a new build is required. When I run command to create build, It's giving the 'properties undefined error' in 'webpack-cli' library (See the attached screenshot for reference). Can you suggest where I'm doing wrong? I need to embed this with our application.

Publish latest version of the library

Hello - I see that over the past few years several pull requests were merged, a notable one with the ie support, however, the latest npm version is still 1.0.5, published 3 years ago. Can we make a new release? It would be great

Ordered <ol> and Unordered <ul> List view doesn't support the differentiation in the HTML diff

An ordered and Unordered list is not supported in HTML diff Library when I am comparing two different HTML code.

Below I am stating an example which will brief you as follows:-

old html Code with unordered list view

<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

new html Code with ordered list view

<ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol>

It is not showing up any difference when I am using the same library.

For reference I am pasting the sceenshot regarding the above example.

Please review and Let us know your thoughts and suggestions over it.