两个HTML块之间的差异:结构而不是行/字符？

Question

我正在寻找一个JavaScript diff引擎,它将返回两个HTML块结构的差异.也就是说,而不是"在这一行,在这样的角色,发生了什么事情",它是",这个元素被插入到这个元素之后",或者"这个元素被删除了",或者"这个文本节点是改变了"等

粗略的研究表明这很难.

具体情况是我有Markdown文本编辑器的实时预览.它只适用于文本,但是一旦用户发布了一个YouTube <iframe>嵌入,那么它会在每次击键时呈现/重新加载,这非常昂贵.大图像也很难,因为它们从缓存加载时会产生恶心的抖动效果(至少在WebKit中).

什么是美丽的是替代jQuery.html()它而不是仅仅替换HTML内容实际上比较旧的和新的,并选择性地更新/插入/附加,以便保持不变的元素.

Answer 1

1. node.cloneNode(true)如果当前正在使用两个节点（即，如果 JavaScript 中引用了任何子节点），则深度克隆（通过）两个节点。
2. 通过标准化两个节点node.normalize()。
3. 迭代两个节点的每个子节点并与 进行比较node.isEqualNode(other_node)。
4. 对于每个不相等的节点，深入迭代以查看是否可以找到任何相等的子节点。

老实说，使用文本比较库比创建自己的基于 DOM 的比较库要好得多。