比较两个 HTML 源并显示视觉差异

Question

我试图显示两个HTML页面的不同之处。我正在尝试找出一种方法，如果我可以比较两个网页的HTML源代码（几乎相似），并在视觉上显示/突出显示差异（在UI上）。

我尝试了什么：我想拍摄页面的快照，然后使用Resemble.js来比较两个图像。但这也显示出非常微小的差异，结果尚不清楚。

我想比较 DOM 结构或源代码，然后显示两个页面在 UI 上的实际差异或位置。

有什么办法可以做到这一点吗？ 我正在使用Selenium-Webdriver来获取快照和HTML源代码。

编辑：

我想我的问题不清楚。实际上，我想找出网页HTML内容的差异，以便检测当前正在执行的A/B测试。我首先将 html 源代码抓取到一个文本文件中，然后将其与之前使用 Java-Diff util 捕获的 HTML 源代码进行比较。这给了我实际的行，这些行在两个带有HTML源代码的文本文件中有所不同。

现在，问题是，如何在 UI 上显示这种差异，就像突出显示我发现的不同区域一样？希望这会更清楚。

下面的代码显示了不同的行

List<String> original = fileToLines("HTML Source diff/originalSource.txt");
    List<String> revised = fileToLines("HTML Source diff/sourceAfterCookieClear.txt");
    // Compute diff. Get the Patch object. Patch is the container for computed deltas.
    Patch patch = DiffUtils.diff(original, revised);
    System.out.println("Printing Deltasn");
    for (Delta delta : patch.getDeltas()) {
        String revisedText = delta.getRevised().toString();
        String content = revisedText.substring(revisedText.indexOf(" [")+2,revisedText.indexOf("]]"));
        writeTextToFile(content,"difference.html");
    }

代码形式的任何线索都会有所帮助。

Answer 1

使用 python 的 difflib。例如：

import difflib
file1 = open('file1.html', 'r').readlines()
file2 = open('file2.html', 'r').readlines()
htmlDiffer = difflib.HtmlDiff()
htmldiffs = htmlDiffer.make_file(file1, file2)
with open('comparison.html', 'w') as outfile:
    outfile.write(htmldiffs)

这将创建一个名为 comparison.html 的 html 文件，其中包含两个 html 文件之间的差异 file1.html 和 file2.html 。在这里，file1.html被认为是来源或原始版本，以更适合您的情况为准，file2.html是更改的版本或新版本，同样，以更合适的版本为准。

希望对您有所帮助！

Answer 2

使用 daisyDiff APIhttp://code.google.com/p/daisydiff/您可以在 java 代码返回差异后从命令提示符调用此 api。

Answer 3

你试过 BackstopJS 吗？

它没有记录，但有一个misMatchThreshold参数可用于隐藏细微差异：https://github.com/garris/BackstopJS/issues/52

Answer 4

我假设你想比较两个HTML代码文件。在这种情况下，我想向您指出以下库：

http://code.google.com/p/java-diff-utils/

Answer 5

您可以将差异列表中的每个元素嵌入到彩色div 中，以便轻松查看

您

说您有差异列表和之前/之后的 HTML 文档。如果你能确定每个差异元素来自哪个HTML文档，那么你可以在DOM中通过id查找它们，并将它们嵌入到彩色div中，使其易于查看。

Answer 6

好的，

你总是有解决方案，除了一个三。使用 JSCRIPT 函数查找补丁文本中的第一个 ID 或类，并使用 jQuery 专注于元素。如下所示：

对于所有字符，直到找到"id"var firstIdOfThePatchText = xxx;$（'#firstIdOfThePatchText '）.focus...

欢呼