Jquery替换HTML，仅在更改时进行

Question

我正在克隆一个实时的Markdown编辑器，dillinger.io，但与Dillinger不同的是，当您在文档中嵌入视频时，我不希望每次更新文档时都刷新和闪烁视频，而这种情况经常发生。

DOM组织方式如下。

<div id='editor'></div>
<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>What a dull video</p>
</div>

在这种情况下，编辑器是美妙的 Ace editor，它允许我通过editor.getValue()获取其中的写作。

有没有一种简单的已知方法可以做到这一点？我搜索了谷歌，但没有找到有用的信息。

这就是我目前拥有的。

function update(){
    var mk = editor.getValue();
    var updatedHtml = converter.makeHtml(mk);
    $('#viewer').html(updatedHtml); 
}

editor.getSession().on('change', function(e) {
    update();
});

但我想把它改成这样

function update(){
    var before = $('#viewer').html();   
    var mk = editor.getValue();
    var updateHtml = converter.makeHtml(mk);
    $('#viewer').replaceWhereDifferent(updateHtml, before); 
}

这将停止嵌入的YouTube视频在更新时闪烁。问题是我没有一个好的函数表单。一些示例HTML字符串如下：

<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>comment</p>
</div>

现在假设用户将p标签改为

。

<p>OMG thats the best video ever</p>

我希望视频能够在不刷新的情况下更新

所有这些代码都是由Markdown转换器生成的，该转换器从Ace编辑器中获取代码。因此，所有Markdown都一起转换，我无法区分或标记Markdown的不同部分。我只能获得更新后的HTML字符串。

- Eoin Murray

---

有任何示例代码吗？每种情况都是独特的。 - bobthyasian

好的，我正在寻找解决方案...所以我还没有代码，我会提供更多细节。 - Eoin Murray

更具体地说，这两个HTML字符串是什么？这有点模糊。 - bobthyasian

你的DOM布局是什么？（页面如何分解？） - bobthyasian

我已经添加了更多内容，基本上是从Ace编辑器读取代码，通过Markdown转换器运行它，并替换div #viewer的内容。 - Eoin Murray

Answer 1

是的，这是可能的。你可以利用Google的增量DOM或者查看Flarum使用的s9e TextFormatter并提取需要的部分。

- Denis Pshenov

Answer 2

没有“简单”的方法。您需要对两个 HTML 片段进行 Diff，然后使用 Delta 进行高级操作。

我会采用完全不同的方法来解决这个问题：

1. 当您想要更新 HTML 时，请使用 jQuery 将视频标记 HTML 放置在新 DIV 中。
2. 使用简单的字符串替换或 .html() 或其他方法替换所有 HTML。
3. 将视频标记放回到它所应该的地方。

例如：

$('#placeholder').html($('#videodiv').html()); //1.
$('#divtoupdate').load("/URL/for/newdata");    //2
$('#videodiv').html($('#placeholder').html()); //3

- Captain Kenpachi

---

如果你猜的话，这个会有多慢/快？ - Henrik Andersson

我认为当你移动、替换视频时仍会出现闪烁，基本上我希望在更新中视频保持不变。 - Eoin Murray

Answer 3

感谢您提供的额外信息。现在我们有了更清晰的画面。如果您只想替换 <p>，那很容易。

JS：

$('#add_comment').click(function(){ //User clicks add comment
  var comment = $('#comment_input').val(); //Get user's comment
  $('#viewer p').html(comment); //update viewer's <p>
});

我希望这能给你一个继续的思路。

- bobthyasian

---

那个解决方案对我不适用，因为我无法访问单独的p标签，所有旧的和更新的HTML都是以块的形式出现的。 - Eoin Murray

Answer 4

在您的DOM元素上放置一个属性，其中包含它们上次更新的时间戳。当实际进行更改时增加时间戳，仅在时间戳不同的情况下更新DOM。

- PhonicUK