將<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輸出正確的標籤