使用Jquery在Html链接上创建一个超链接

Question

我有像

这样的Html内容

<span> 
 http://j.mp/eUcRNK
</span>

我想在上面的html文字上加上超链接

<span>
    <a href="http://j.mp/eUcRNK" class="link" target="_blank">
    http://j.mp/eUcRNK
    </a>
</span>

我怎么能这样做..

Answer 1

$('span').html(function(i,txt){
   return $('<a>').text(txt).attr({'target':'_blank', 'href': txt }).addClass('link');
});

demo

基于以下评论，我想这可以解决它。

$('span').html(function(i,txt){
   return replaceURLWithHTMLLinks(txt);
});

function replaceURLWithHTMLLinks(text) {
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(exp,"<a class='link' href='$1' target='_blank' >$1</a>"); 
}

updated fiddle

对于jquery 1.3.2，只需更改jQuery代码。

var span = $('span');
span.html(replaceURLWithHTMLLinks(span.html()));

another updated fiddle

Answer 2

尝试

$("span").each(function(){
    var text = $(this).text();
    $(this).contents().wrap("<a class='link' href='" + text + "' target='_blank' />")
});