Make word in into a link jQuery

Question

I'm trying to make this:

<td class="Monthly Status-cell">/fileid=XXXX</td>

Display as

http://www.domain.com/fileid=XXXX

Can you tell me what is wrong with my code?

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

Thanks!

Answer 1

Use .html() instead of .replaceWith(). While using replaceWith you are replacing the td with anchor inside your table, which is invalid and that must be causing your alignment to get messed up.

$('.Status-cell').html(function(_, currentText) {
   var url = "http://www.domain.com" + $.trim(currentText);
   return '<a href="' + url + '" target="_blank">' + url + '</a>';
});

Fiddle

Answer 2

Rather than replace the td with a link you should place the link in the td. Also you didn't add the domain to the link

$('.Status-cell').html(function() {
    var url = window.location.protocol+'//'+window.location.host+$.trim($(this).text());
    return '<a href="' + url + '" target="_blank">' + url + '</a>';
});

http://jsfiddle.net/bUpYE/1/

Answer 3

Try

$('.Status-cell').html(function(idx, value){
    value = $.trim(value);
    return '<a href="http://www.domain.com' + value + '">http://www.domain.com' + value + '</a>';
})

Demo: Fiddle

Answer 4

Place the link in the cell using .html() instead of .replaceWith():

var domain = window.location.hostname; // current domain
$('.Status-cell').html(function(i, value) {
    var link = domain + $.trim(value);
    return '<a href="//' + link + '">' + link + '</a>';
});

http://jsfiddle.net/samliew/ZUYCX/