Adding links to specific phrases or keywords in jQuery

Question

I am trying to turn specific words or phrases into links with jQuery. So far I have only been successful in changing a span with a class="link" to an anchor tag after a hover event. My problem is that I want them to change when the page loads. As an added benefit it would be nice to target any words or phrases without having to put them in spans.

$('span.link').hover(function () {

    $(this).replaceWith("<a href='http://mydomain.com'>" + $(this).text() + "</a>");

});

Works only when they hover over the text, but what I really want is something like this:

var keyword = 'my keyword';

var link = $(document).find(keyword);

$(document).ready(function() {
    link.replaceWith("<a href='http://mydomain.com'>" + $(this).text() + "</a>");
 });

See http://stackoverflow.com/questions/1583303/search-for-words-replace-with-links/1583582#1583582. — Max Shawabkeh, Mar 07 '10 at 01:42

score 2 · Accepted Answer · answered Mar 07 '10 at 01:37

Instead of using the hover event to initiate the change, use the each method which will execute for each matched element the moment you call it ..

so

$('span.link').each(function () {

    $(this).replaceWith("<a href='http://mydomain.com'>" + $(this).text() + "</a>");

});

will convert all yours spans to links in one go ..

Adding links to specific phrases or keywords in jQuery

1 Answers1