将<span>的文本转换为超链接

Question

更新：
答案＃3结束了最佳工作。我很可能做了其他建议有问题的地方; ＃3可能是最容易实现的。如果你很好奇，我试过的例子的解决方案可以在这里找到（现在）：

1. http://dl.dropbox.com/u/1007716/spanToUrl/test01.html
2. HTTP： //dl.dropbox.com/u/1007716/spanToUrl/test02.html
3. http://dl.dropbox.com/u/1007716/spanToUrl/test03.html（冠军）
4. http://dl.dropbox.com/u/1007716/spanToUrl/test04.html
5. HTTP ：//dl.dropbox.com/u/1007716/spanToUrl/test05.html
6. http://dl.dropbox.com/u/1007716/spanToUrl/test06.html

原贴：
我有一个<span>标签内的一个纯文本的网站地址。我想这<跨度>标签变成正确的超级链接与target="_blank"

我已经把我与这里的工作一个详细的例子：http://bit.ly/spantourl

如果你不想点击进入，这里是我有：

<span>http://www.domain.com/about</span> 

，我需要更改为：

<a href="http://www.domain.com/about" target="_blank">http://www.domain.com/about</a> 

Answer 1

试试这个：

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

不需要each，因为replaceWith可以迭代多个元素并可以将函数作为参数。

看看您的示例HTML，我发现它只是第一个包含URL的<td>。如果确实只有一个，你可以添加first()到选择链，就像这样：

$('.sampleClass span').first().replaceWith(/* ... */); 

如果是关系到整个列包含链接，比你想每隔匹配操作。通过附加:even你的选择，这样做：

$('.sampleClass span:even').first().replaceWith(/* ... */); 

（是的，:even，而不是:odd选择第1，第3，&Ç元素，因为从零开始的索引。）

Answer 2

认沽ID和像

var linkText = $("#yourspanid").text(); 

$("<a/>").attr({"href": linkText, "target": "_blank"}).text(linkText).appendTo("body"); 
$("#yourspanid").remove(); 

那么你可以做一些改变，根据您的编辑跨度

var elems = $("span.myClass > span"); 
elems.each(function(){ 
    var linkText= $(this).text(); 
    $("<a/>").attr({"href": linkText, "target": "_blank"}).text(linkText).appendTo("body"); 
}); 
elems.remove(); 

看到一个working demo

Answer 3

你需要有某种形式的身份，以做从节点A到节点B的转换。我会建议沿着以下几行：

JQuery代码：

<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> 

的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> 

上面的代码没有进行测试，但应该有希望导致你在正确的方向。

Answer 4

使用jQuery。

给跨度的ID：

<span id="linkChange">http://domain.com</span> 

jQuery代码：

var href = jQuery('#linkChange').html(); 
var link = "<a href='"+href+"' target='_blank'>"+href+"</a>"; 

jQuery('#linkChange').replaceWith(link); 

Answer 5

也许是这样的：（不需要知道IDS /班）for-each循环期运用jquerys和specificly目标跨越TDS内

$（文件）。就绪（函数（）{ $（ 'TD跨度' ）.each（function（）{ $（this）.text（“”+ $（this）.text（）+“”）; }）; }）;

编辑：此代码的效果要好得多：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('td span').each(function(){ 
      $(this).html("<a href='" + $(this).html() + "' />" + 
       $(this).html() + "</a>"); 
     }); 
    }); 
</script> 

的原始使用jQuery的哪个HTML逃脱<>字符.text()功能，无意中插件> <到DOM，而实际上的.html输出正确的标签