读取

类型标端口 htmldiff-js (韩语),这是 JavaScript 端口 HtmlDiff (英语). 净额 它本身就是鲁比执行的C#港口, Htmldiff 图像。 。 。 .

项目说明

Diffs 2 HTML 块,并返回包含两个块的磁盘 <ins> 财务报告和审定财务报表 <del> 要素。 这些要素的类别是: ins.diffins 对于新的代码, del.diffdel 用于删除的代码,以及 del.diffmod 财务报告和审定财务报表 ins.diffmod 用于已修改代码的章节.

对于"特殊标记"(主要是样式标记,例如: <em> 财务报告和审定财务报表 <strong>, (中文(简体) ), ins.mod 元素被插入到新样式中.

详情请参见本文 博客文章 htmlDiff的作者罗克兰所著. 网易网.

说明:分解算法不完美. 一个例子是,如果一个新的 <p> 结尾与上一个字符串相同 <p> 标记有,两个 <ins> 将创建标签: 从第一个字符串的开头开始一个 <p> 和第二个 <p> 包含全部内容直到后导常见字符串开始点。 这有点令人沮丧,但是我并没有写出算法(而且真的不理解);我只把它移植了.

使用量

电量

<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>

Java 脚本

import HtmlDiff from 'htmldiff-js';

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

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