Question

HTML：

<html>
<body>
    <textarea>Original Text</textarea>
    <button>Replace</button>
</body>
</html>

jQuery的：

$(function() {
 $('button').click(function () {
     $('body').html($('body').html().replace('Original','New'));
 });
});

http://jsfiddle.net/r7MgY/

我可以用渐弱的黄色背景突出显示变化吗？

Answer 1

正如Sarfraz所说，使用jQuery颜色插件。用法与jQuery中的animate方法相同。该插件会覆盖这些属性的动画方法：'backgroundColor'，'borderBottomColor'，'borderLeftColor'，'borderRightColor'，'borderTopColor'，'color'，'outlineColor'。

jQuery动画方法用法和信息可以在这里找到：http://api.jquery.com/animate/

另外，如果你想要替换HTML中的某些内容，最好获取包含你想要调用replace方法的标记的包装标记，而不是作为字符串搜索整个主体。通常你会使用：

$('#idOfMyWrapperTag').html().replace('this', 'that')

但是既然你正在使用textarea，你可以用它来获得它的价值：

$('textarea').val().replace('this', 'that');

..弗雷德里克

Answer 2

因为它是一个textarea，你不能直接将任何html注入到内容中。你必须覆盖一个包含红色波浪线或类似物的绝对定位元素 - 在计算出文本的确切位置时会变得有点噩梦。

如果可能的话，抛弃textarea并使用可编辑的div或类似物。

Answer 3

我可以用某种方式突出显示更改褪色的黄色背景可能吗？

您必须使用 jquery color plugin 来淡化背景颜色。

Answer 4

您可以使用

解决此问题

$(function() {
  $('button').click(function () {
     $('body').html($('body').html().replace(/Original/g,'<span class="fade" style="opacity: 0; background-color: yellow;">New</span>'));
     $('.fade').animate({
        'opacity': 1
     }, 1000, function(){
        $(this).contents().unwrap();
     });
  });
});

Answer 5

如果您不想包含另一个插件，可以使用一些jQuery代码来完成淡入淡出的叠加：

jQuery.fn.highlight = function() {
   $(this).each(function() {
        var el = $(this);
        el.before("<div/>")
        el.prev()
            .width(el.width())
            .height(el.height())
            .css({
                "position": "absolute",
                "background-color": "#ffff99",
                "opacity": ".9"   
            })
            .fadeOut(500);
    });
}

$("#target").highlight();

归功于这个答案：https://stackoverflow.com/a/11589350/1145177

突出变化？

5 个答案: