JQUERY，比较两个文本块，然后只动画新文本。

Question

我有两块文字

文本块1-当前显示在页面上："Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd adskadskl1lksad Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa

但现在后端的第1块是："Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd jasd dsa Ahd Hd ahaSdjdajs dadjs jasd jasd adskadskl1lksad klasd jasd dsaadskadskl1lksad klasd jasd dsa Ahd ahaSdjdajs dadjs jasdadskadskl1lksad klasd Hd dadjs jasd adskadskl1lksad klasd klasd dsa Ahd ahaSdjdajs Hd dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd Hd Hd / Hd ahaSdjdajs dadjs / Hd ahaSdjdajs backend 19#Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa

我想用服务器上的第2块更新页面上的原始块1。

我想附上，而不是闪现整个街区。所以只有新的东西被闪现了。

对于如何在JQUERY中做到这一点，有什么想法吗？

Answer 1

嗯，这不是闪光灯，但它确实显示了你如何将闪光灯集中在新的内容上。为了能见度我把它涂成了黄色。

旧的内容与“旧”的内容有很大的差距。新内容与类"new“放在一起。

在行动中看到它：http://jsfiddle.net/P2T8Q/

HTML

<span id="page">Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa</span>

CSS

​.new {
    background: yellow;
}​
​

jQuery

var backend = "Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa";

var page = $('#page').text();

backend = backend.replace(page, function(str){ return '<span class="old">' + str + '</span><span class="new">' });

$('#page').html(backend + '</span>');

编辑：

如果要避免字符串吊带，请执行以下操作：

http://jsfiddle.net/P2T8Q/1/

jQuery

var backend = "Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasdadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsaadskadskl1lksad klasd klasd dsa Ahd Hd ahaSdjdajs dadjs jasd adskadskl1lksad klasd klasd dsa";

var page = $('#page').text();

var regex = new RegExp('^(' + page + ')(.+)');

backend.replace(regex, function(str,p1,p2){var old = $('<span class="old" />').text(p1); var updated = $('<span class="new" />').text(p2); $('#page').empty().append(old).append(updated); });