当前位置: 首页 > 面试题库 >

任何人都有用于呈现HTML的差异算法?

东郭宏朗
2023-03-14
问题内容

我有兴趣看到一种很好的diff算法(可能是Java语言),用于呈现两个HTML页面的并排diff。想法是,差异将显示 呈现的 HTML 的差异。

为了澄清,我希望能够将并排差异 作为 渲染输出。因此,如果我删除一个段落,并排视图将知道正确地隔开空间。

完全是@Josh。虽然也许它将以红色或其他形式显示已删除的文本。这样的想法是,如果我对HTML内容使用WYSIWYG编辑器,则不需要切换到HTML进行比较。我想与两个所见即所得的编辑并排执行。或至少在最终用户友好的问题上并排显示差异。


问题答案:

您还可以使用另一个不错的技巧来显着改善呈现的HTML差异的外观。尽管这不能完全解决最初的问题,但将在呈现的HTML差异的外观上产生重大差异。

并排呈现的HTML将使您的差异很难垂直对齐。垂直对齐对于比较并排差异至关重要。为了改善并排diff的垂直对齐方式,您可以在diff的每个版本中的“检查点”处将diff垂直对齐,以插入不可见的HTML元素。然后,您可以使用一些客户端JavaScript在检查点周围添加垂直间距,直到侧面垂直对齐为止。

详细解释:

如果要使用此技术,请运行diff算法,并在并排版本应该匹配的位置插入一堆visibility:hidden <span>s或tiny
<div>。然后运行JavaScript,以找到每个检查点(及其并排的相邻点),并向页面上较高(较浅)的检查点添加垂直间距。现在,您呈现的HTML差异将一直垂直对齐到该检查点,并且您可以继续在其余的并排页面下修复垂直对齐。



 类似资料:
  • 这是我的模板: 这是我的视图模板: 我得到的内容是html,我想在视图中显示,但我得到的只是原始html代码。如何呈现HTML?

  • 问题内容: 这不是我的问题的重复。我检查了一下,它更多地是关于内部匿名类的。 我对Lambda表达式感到好奇,并测试了以下内容: 给定一万个条目的数组,删除某些索引的更快方法是什么:在内部进行if测试的Lamba表达式或For-Loop? 最初的结果不足为奇,因为我不知道自己要提出什么: 但是后来,我决定将常数更改为一百万,结果如下: 为了使内容更易于阅读,以下是结果: 我有以下问题: 这背后的魔

  • 这是用reactjs呈现原始html的唯一方法吗? 我知道有一些很酷的方法用JSX标记东西,但我主要感兴趣的是能够渲染原始的html(所有的类,内联样式等)。像这样复杂的东西: 我不想在JSX中重写所有这些。 也许我对这一切的想法都错了。请纠正我。

  • 问题内容: 我有一个基本的node.js应用程序,我正在尝试使用Express框架。我有一个存放文件的文件夹。但是加载网络浏览器时收到以下错误。 错误:找不到模块“ html” 下面是我的代码。 我在这里想念什么? 问题答案: 您可以让jade包含一个普通的HTML页面: 在views / index.jade中 在views / plain.html中 而且app.js仍然可以渲染jade:

  • 因此,我用javascript呈现了一个add minus按钮,因为我需要数据库中的数据,如果我不用javascript呈现它,它可以工作,但它不工作。 HTML: JS(渲染): JS(加减按钮): (调用所有函数) 我的测试使我认为问题可能是val()函数没有改变输入HTML的值,因为如果我使用console.log来显示它,它可以工作,但它不会在web上更新

  • 我在一个表单上有一个TextField输入,问题是当我在它上键入时,刚刚键入的值的显示/呈现有一种延迟,我想防止这种延迟。 代码: