使用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');
});

演示

根据下面的评论，我想这解决了。

$('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>"); 
}

更新的小提琴

对于jquery 1.3.2，只需更改一下jQuery代码即可。

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

另一个更新的小提琴

Answer 2

尝试

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