如何比较两段HTML代码并显示差异

Question

假设我有2个htmls

var p1 ="<h1>Title</h1>";
var p2 = "<h2>Title changed</h2>";

我需要生成一个视觉差异的电子邮件，就像源控制系统对更改/添加/删除的内容所做的一样。

基本上，电子邮件需要说明更改内容，添加内容，删除内容。

显然htmls会更复杂，我只是想说明我需要做什么。

但是，我不确定，我应该朝哪个方向看看，我的选择是什么？

Answer 1

您可以使用John Resig的算法来比较两个字符串：http://ejohn.org/projects/javascript-diff-algorithm/

只需下载并在脚本中包含jsdiff.js，然后按以下方式运行：

var p1 ="<h1>Title</h1>";
var p2 = "<h2>Title changed</h2>";

document.body.innerHTML = diffString(p1, p2);

Answer 2

查看Winmerge。
WinMerge是Windows的开源差异和合并工具。 WinMerge可以比较文件夹和文件，以易于理解和处理的可视文本格式呈现差异。