Java 比较两个 HTML 源代码并显示视觉差异
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18955417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Compare two HTML sources and display visual differences
提问by roger_that
I am trying to show where the two HTML pages differ. I am trying to figure out a way if i can compare the HTML source code of two webpages(almost similar), and show/highlight the differences visually(on UI).
我试图显示两个 HTML 页面的不同之处。我试图找出一种方法，如果我可以比较两个网页的 HTML 源代码（几乎相似），并在视觉上（在 UI 上）显示/突出显示差异。
What I tried:I thought of taking snapshot of the page and then use Resemble.jsto compare two images. But that shows very minute differences as well and results are something which is not clear.
我的尝试：我想拍摄页面快照，然后使用Resemble.js比较两个图像。但这也显示出非常细微的差异，结果尚不清楚。
I thought of comparing the DOM structure or the source code and then show what or where actually the two pages differ on UI.
我想比较 DOM 结构或源代码，然后显示两个页面在UI上的实际差异或不同之处。
Is there any way i could achieve this? I am using Selenium- Webdriverto get the snapshots and the HTML source code.
有什么办法可以做到这一点吗？我正在使用Selenium-Webdriver来获取快照和 HTML 源代码。
EDIT:
编辑：
I guess my question was not clear. Actually, i wanted to find out the difference in HTML content for webpages in order to detect A/B tests being performed currently. I first grabbed the html source into a text file and then compared it with previously captured HTML source using Java-Diff util. This gave me the actual lines which differ in two text files with HTML source.
我想我的问题不清楚。实际上，我想找出网页 HTML 内容的差异，以便检测当前正在执行的 A/B 测试。我首先将 html 源代码抓取到一个文本文件中，然后使用Java-Diff util将其与之前捕获的 HTML 源代码进行比较。这给了我在两个带有 HTML 源代码的文本文件中不同的实际行。
Now, the problem is, how can i show this difference on UI as in highlighting the areas which i found are different? Hope this would make it more clear.
现在，问题是，如何在 UI 上显示这种差异，如突出显示我发现不同的区域？希望这会让它更清楚。
The below code shows the lines which differ
下面的代码显示了不同的行
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");
}
Any leads in form of code would be helpful.
任何以代码形式出现的线索都会有所帮助。
回答by Husman
I assume you would like to diff the two HTML code files. In which case I would like to point you towards the following library:
我假设您想比较两个 HTML 代码文件。在这种情况下，我想向您指出以下库：
回答by Rajveer Singh
Use daisyDiff api http://code.google.com/p/daisydiff/You can call this api from a command prompt after your java code returns a difference.
使用 daisyDiff api http://code.google.com/p/daisydiff/您可以在 Java 代码返回差异后从命令提示符调用此 api。
回答by A. Joahny
Have you tried BackstopJS?
你试过BackstopJS吗？
It's not documented but there is a misMatchThresholdparameter you can use to hide subtl differences: https://github.com/garris/BackstopJS/issues/52
它没有记录，但有一个misMatchThreshold参数可以用来隐藏细微的差异：https: //github.com/garris/BackstopJS/issues/52
回答by Hamit YILDIRIM
ok you have got the solution always , just except one tric. find first id or class in your patch text with a jscript function and focus over the element with jquery. something like below:
好的，你总是有解决方案，只是除了一个 tric。使用 jscript 函数在补丁文本中找到第一个 id 或 class，并使用 jquery 关注元素。像下面这样：
for all characters untill find 'id' var firstIdOfThePatchText = xxx; $('#firstIdOfThePatchText ').focus...
对于所有字符，直到找到 'id' var firstIdOfThePatchText = xxx; $('#firstIdOfThePatchText ').焦点...
cheer
欢呼
回答by Sна?ош?а?
Use python's difflib. For example:
使用 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)
This will create an html file named comparison.htmlcontaining the diffs between the two html files file1.htmland file2.html. Here file1.htmlis considered the source, or original versionwhichever is more appropriate for your case, and file2.htmlis the changed versionor new version, again, whichever is more appropriate here.
这将创建一个 html 文件，comparison.html其中包含两个 html 文件file1.html和.html 文件之间的差异file2.html。这里file1.html被认为是源或原始版本，以更适合您的情况为准，并且file2.html是更改版本或新版本，再次，以此处更合适的为准。
Hope that helps!
希望有帮助！
回答by pholtz
You could embed each element from the diff list in a colored div so that it's easily visible
您可以将 diff 列表中的每个元素嵌入一个彩色 div 中，以便它很容易看到
You stated that you have the list of diffs and the before/after HTML documents. If you can determine which HTML document each differenced element came from, then you could look them up by id in the DOM and embed them into a colored div to make it easily visible.
你说你有差异列表和之前/之后的 HTML 文档。如果您可以确定每个差异元素来自哪个 HTML 文档，那么您可以在 DOM 中通过 id 查找它们并将它们嵌入到一个彩色 div 中，使其易于查看。
