Convert <span> text to hyperlink

Question

UPDATE:
Answer No. 3 turned out to be the best. I most likely did something wrong with the other suggestions; # 3 is probably the easiest to implement. If you're interested, examples of the solutions I tried can be found here (for now):

• http://dl.dropbox.com/u/1007716/spanToUrl/test01.html
• http://dl.dropbox.com/u/1007716/spanToUrl/test02.html
• http://dl.dropbox.com/u/1007716/spanToUrl/test03.html (winner)
• http://dl.dropbox.com/u/1007716/spanToUrl/test04.html
• http://dl.dropbox.com/u/1007716/spanToUrl/test05.html
• http://dl.dropbox.com/u/1007716/spanToUrl/test06.html

ORIGINAL POST:
I have a regular website address inside the <span> . I would like to change this <span> tag to the corresponding hyperlink with target="_blank"

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

If you do not want to click, here is what I have:

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

and I need to change this to:

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

Answer 1

Try the following:

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

There is no need for each , since replaceWith can iterate over multiple elements and can take a function as a parameter.

Looking at your HTML sample, I see that this is only the first <td> containing the URL. If there really is only one, you can add first() to the selector chain, for example:

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

If this is more of an entire column containing links than you want to work with every other match. Do this by adding :even to your selector, for example:

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

(Yes :even , not :odd , to select items 1, 3, and 5 due to indexing based on 0.)

Answer 2

Put a span id and then you can do something like

 var linkText = $("#yourspanid").text(); $("<a/>").attr({"href": linkText, "target": "_blank"}).text(linkText).appendTo("body"); $("#yourspanid").remove(); 

Change as per your edit

 var elems = $("span.myClass > span"); elems.each(function(){ var linkText= $(this).text(); $("<a/>").attr({"href": linkText, "target": "_blank"}).text(linkText).appendTo("body"); }); elems.remove(); 

See working demo

Answer 3

To convert from node A to node B. you need to have some form of identification. I would suggest something in the following lines:

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> 

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 has not been verified, but hopefully leads you in the right direction.

Answer 4

Use jQuery.

enter span id:

 <span id="linkChange">http://domain.com</span> 

JQuery Code:

 var href = jQuery('#linkChange').html(); var link = "<a href='"+href+"' target='_blank'>"+href+"</a>"; jQuery('#linkChange').replaceWith(link); 

Answer 5

Maybe something like this: (no need to know identifiers / classes) using jquery for each loop and specifically target spaces inside tds

$ (Document) .ready (function () {$ ('td span'). Each (function () {$ (this) .text ("+ $ (this) .text () +" ");}); }); Strike>

EDIT: this code works much better:

 <script type="text/javascript"> $(document).ready(function(){ $('td span').each(function(){ $(this).html("<a href='" + $(this).html() + "' />" + $(this).html() + "</a>"); }); }); </script> 

The original used the .text() jquery function, which html avoided the <> characters, inadvertently added > < > < in dom, and .html actually outputs the correct tags