javascript - 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()

获取其中的文字

有没有一种简单的已知方法可以做到这一点？我用 Google 搜索过，没有找到任何有用的东西。

这是我现在的状态

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 视频在每次更新时闪烁。

问题是我没有合适的函数形式

replaceWhereDifferent(updateHtml, before)

一些示例 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 editor 中获取代码生成的代码.所以所有的 Markdown 都是一起转换的，我不能区分或标记 Markdown 的不同部分。我得到的只是更新后的 html 字符串

Answer 1

是的，这是可能的。您可以使用 Google's Incremental DOM或者你可以看看 s9e TextFormatter Flarum 使用并提取您需要的部分。