Hi! I'm currently reworking my site, so although this content is still online things may change or look odd. Please get in touch to find out how I can help you!
Simple Text Replacement in jQuery
This morning, my friend-across-the-water Candi was having an issue with JavaScript’s replace() function - after a bit of head-scratching I realised that it just doesn’t work the way you expect it to if you’re used to using a framework like jQuery.
To explain what I mean, consider the following code. You might expect that it will replace all instances of “foo” with “bar” in the content of $('#baz')…
$('#baz').html().replace('foo', 'bar');
…but you’d be wrong. It actually has no effect on $('#baz') at all. This is because replace() doesn’t actually modify the content it’s passed, but returns the modified string. So the correct code would be:
$('#baz').html($('#baz').html().replace('foo', 'bar'));
Not particularly intuitive, and not very elegant either. So it set me thinking that there must be a more “jQuery-style” way to do this, and I came up with the following two functions:
$.fn.textReplace = function(target, replacement) {
this.html(this.html().replace(target, replacement));
return this;
}
$.fn.attrReplace = function(attr, target, replacement) {
this.attr(attr, (this.attr(attr).replace(target, replacement)));
return this;
}
How Do They Work?
The two functions perform similar but slightly different tasks. textReplace() will modify the HTML content of an element, so you can pass it pretty much anything, be it a <p>, <textarea> or even your <body> and it will do its thing - but it’s best to be as specific as you can to avoid lots of processing.
attrReplace() will only perform a text replacement on the specified attribute of the element you call it on. So, if you want to change an <img>’s src, or an <input>’s value, attrReplace() is your friend.
Both functions pipe their target and replacement parameters straight into the standard replace() function, so you can pass regular expressions if you like.
Finally, these functions work in the intuitive jQuery style you know and love - they even return this so you can carry on chaining methods to your heart’s content.
Check out the demo for some examples of textReplace() and attrReplace() in action.
Posted on Wednesday, 27th July 2011.
Feedback
Sorry, feedback is now closed on this post, but please feel free to get in touch if you would like to talk about it!