Home/ Questions/Q 4021690
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:22:58+00:00

UPDATE: Answer #3 ended up working the best. I most likely did something wrong

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0