Menu
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):
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>
383
Yes, it's a reliable way to put <span> or <img> (or any element you want to be a link) in a <a> tag. The tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.
if you want a link inside a span, put <a> inside <span> .
HTML is a very flexible scripting language that allows you to add a lot of things that are not defined in the language, which then will be simply ignored. So according to that, adding an href attribute on an span element is valid, but will not work as a real href attribute and will be simply ignored.
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.)
151
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
