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

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/

Answer 4

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