Convert a <span>'s text into a hyperlink

Question

UPDATE:
Answer #3 ended up working the best. I most likely did something wrong with the other suggestions; #3 was maybe the easiest to implement. If you are curious, the example solutions that I tried can be found here (for now):

1. http://dl.dropbox.com/u/1007716/spanToUrl/test01.html
2. http://dl.dropbox.com/u/1007716/spanToUrl/test02.html
3. http://dl.dropbox.com/u/1007716/spanToUrl/test03.html (winner)
4. http://dl.dropbox.com/u/1007716/spanToUrl/test04.html
5. http://dl.dropbox.com/u/1007716/spanToUrl/test05.html
6. http://dl.dropbox.com/u/1007716/spanToUrl/test06.html

ORIGINAL POST:
I have a plain text website address inside a <span> tag. I'd like to change that <span> tag into a proper hyperlink with target="_blank"

I've put together a detailed example of what I have to work with here: http://bit.ly/spantourl

If you don't want to click through, here is what I have:

<span>http://www.domain.com/about</span>

and I need to change that into:

<a href="http://www.domain.com/about" target="_blank">http://www.domain.com/about</a>

Answer 1

Try this:

$('.sampleClass span').replaceWith(function() {
    var url = $.trim($(this).text());
    return '<a href="' + url + '" target="_blank">' + url + '</a>';
});

There's no need for each, since replaceWith can iterate through multiple elements and can take a function as a parameter.

Looking at your sample HTML, I see that it is only the first <td> that contains a URL. If there is indeed only one, you can add first() to the selector chain, like this:

$('.sampleClass span').first().replaceWith( /* ... */ );

If it is rather the entire column that contains links, than you'll want to operate on every other match. Do this by appending :even to your selector, like this:

$('.sampleClass span:even').first().replaceWith( /* ... */ );

(Yes, :even and not :odd to select the 1st, 3rd, &c. elements, because of 0-based indexing.)

Answer 2

You need to have some form of identification in order to do the conversion from node A to node B. I would suggest something along the following lines:

The JQuery code:

<script type="text/javascript">

    $('.convertableIdentifier').each(function(i, el) {

        // grab the url and the link text
        var url = $(el).html();

        // create a new node with query by decorating a
        // empty a tag
        var newNode = $('<a></a>').attr('href', url).attr('target', '_blank').html(url);

        // replace the current node with our new node
        $(el).replaceWith(newNode);

    });

</script>

The HTML:

<span class="convertableIdentifier">http://www.google.com</span>
<span class="convertableIdentifier">http://www.youtube.com</span>
<span class="convertableIdentifier">http://www.facebook.com</span>

The above code is not tested, but should hopefully lead you in the right direction.