HTML:
<html>
<body>
<textarea>Original Text</textarea>
<button>Replace</button>
</body>
</html>
jQuery:
$(function() {
$('button').click(function () {
$('body').html($('body').html().replace('Original','New'));
});
});
Can I highlight changes somehow with a fading yellow background maybe?
Thanks
Can I highlight changes somehow with a fading yellow background maybe?
You will have to use the jquery color plugin to fade the background color.
Because its a textarea, you cant inject any html directly into the content. You would have to overlay an absolute positioned element containing a red squiggle or similar - which becomes a bit of a nightmare when working out the exact location of the text.
If possible, ditch the textarea and just use an editable div or similar.
As Sarfraz says, use the jQuery color plugin. Usage is the same as animate method in jQuery. The plugin overrides the animation methods for these properties: 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'.
jQuery animate method usage and info can be found here: http://api.jquery.com/animate/
Also, if you want to replace something in the HTML it's better to get the wrapper tag of the tag that contains what you want invoke the replace method on instead of search through the entire body as a string. Normally you'd use:
$('#idOfMyWrapperTag').html().replace('this', 'that')
But since you are using a textarea you can get it's value with this:
$('textarea').val().replace('this', 'that');
..fredrik
You might be able to workaround it with
$(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();
});
});
});