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?
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/r7MgY/
Can I highlight changes somehow with a fading yellow background maybe?
Share Improve this question edited Sep 19, 2014 at 19:59 tshepang 12.5k25 gold badges97 silver badges139 bronze badges asked May 19, 2010 at 7:40 eozzyeozzy 68.8k109 gold badges284 silver badges447 bronze badges5 Answers
Reset to default 4As 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./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
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 bees 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.
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.
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();
});
});
});
If you don't want to include yet another plugin, you can simply use a little jQuery code to acplish a fading overlay:
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();
Credit goes to this answer: https://stackoverflow./a/11589350/1145177