Use jQuery to Replace a Word with a Link
If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code.
If you don’t already have jQuery loaded into your page, include this before your closing <head>.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> |
That will load up jQuery from Google.
Now you just need to include this in your site’s footer, before the closing <body>. (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.)
<script type="text/javascript"> (function($) { var thePage = $("body"); thePage.html(thePage.html().replace(/jQuery/ig, '<a href="http://jquery.com">jQuery</a>')); })(jQuery) </script> |
Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript replace() function. The i after the slash makes the search and replace case-insensitive, and the g makes it global.
I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site.
May this work with my wp blog? How do I implement it?
Hi. Can we make multiple words to replace & how do this sample via external file??
Hey… great work!
But I’ve got one question, (how) can i replace the word “jQuery” with a variable in the same function?! :
(function($) {
$.fn.tst = function(text) {
var text = “tst”;
var where = $(“body”);
where.html(where.html().replace(/ var text /ig, replacewith));
}
})(jQuery);
Answered the question myself:
Nice work!
I have a question. How can I avoid it from being replaced the text between “a” tag?
Thanks!