比较两个 HTML 源并显示视觉差异 [已关闭]

javascript html comparison java

2022-09-02 04:42:02

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

我尝试了什么：我想到拍摄页面的快照，然后使用Leam.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 Deltas\n");
    for (Delta delta : patch.getDeltas()) {
        String revisedText = delta.getRevised().toString();
        String content = revisedText.substring(revisedText.indexOf(" [")+2,revisedText.indexOf("]]"));
        writeTextToFile(content,"difference.html");
    }

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

答案 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)

这将创建一个名为的 html 文件，其中包含两个 html 文件和之间的差异。这里被认为是源，或原始版本，以更适合您的情况为准，并且是更改的版本或新版本，再次，以此处更合适的者为准。comparison.htmlfile1.htmlfile2.htmlfile1.htmlfile2.html

希望有所帮助！

答案 2

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