dfoverdx / htmldiff-js Goto Github PK
View Code? Open in Web Editor NEWJavaScript port of htmldiff.net (http://github.com/Rohland/htmldiff.net)
License: Other
JavaScript port of htmldiff.net (http://github.com/Rohland/htmldiff.net)
License: Other
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
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
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.
I am getting following error
import HtmlDiff from 'htmldiff-js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
Node version v14.15.4
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)
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.