【问题标题】:How to visually compare two HTML documents?如何直观地比较两个 HTML 文档?
【发布时间】:2021-08-15 13:21:36
【问题描述】:

我正在创建一个 Windows 窗体应用程序来比较两个 HTML 文档。第一个是从外部来源检索的,包含一些结构错误。因此,应用一种算法将 HTML 文本转换为优化的文档,并对应于要比较的第二个文档。之后,我想直观地将优化后的文档与第一个文档进行比较,如果存在差异,则显示差异。

我创建了一个带有两个 webview2 控件的表单,第一个控件显示第一个 HTML 文档。一个按钮用于转换 HTML 文本,然后我想知道执行视觉比较的最佳方法是什么。理想的行为是让第二个 webview2 显示转换后的 HTML 文档并用特殊颜色显示差异。

所以我的第一种方法是使用这个函数:

await webview2.CoreWebView2.ExecuteScriptAsync("window.print();");

并对两张截图进行视觉比较,但我发现使用 webview2 组件暂时无法控制打印弹出窗口。

那么您认为有更好的方法来实现这一点吗?有没有更合适的组件或工具来进行这种比较?

提前感谢您的帮助!

【问题讨论】:

  • 视觉比较是非常困难的(除非你只是简单地看),因为它取决于应用的每一个样式表规则。我认为你让它们彼此相邻的方法是最好的解决方案,否则它需要一些人工智能。
  • 感谢@PoulBak 的回答。在我的例子中,样式表规则没有被修改,所以通常第二个文档应该看起来一样。这可以简化比较过程吗?
  • 并非如此。假设您创建了一个新的 <div>element,然后样式表规则将应用于该元素(即使规则没有更改)。
  • CoreWebView2.CapturePreviewAsync 将为您返回 webview2 中的图像,并且可能比“window.print”更好。其余的我不知道。
  • 非常感谢@DavidRisney,它似乎符合我的要求。我会检查这个功能!

标签: html winforms webview2


【解决方案1】:

在算法中,您能否将更改的元素 ID 添加到列表中,获取该列表,然后通过 javascript 更改 CSS 以突出显示列表中的元素。

我现在正在着手实现它,看看它是否可行。

【讨论】:

  • 感谢@Charles 是个好主意,但在我的情况下它不起作用,因为很多 HTML 元素将被修改。但是这个算法的目标是有一个更正确的 HTML 语法,视觉结果的样式不必改变。这就是为什么我需要进行视觉比较,以确认优化后的文档是否看起来像第一个,即使 HTML 不同。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-05-29
  • 1970-01-01
  • 2020-10-29
  • 1970-01-01
  • 1970-01-01
  • 2010-09-10
  • 2010-09-15
相关资源
最近更新 更多