将 <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 来选择第一个、第三个等元素，因为基于 0 的索引。）

Answer 2

您需要有某种形式的身份证明才能进行从节点 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 3

使用 jQuery。

给 span 一个 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 4

将 span 设置为 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 5

可能是这样的：（无需知道 ids/classes）使用 jquerys for-each 循环并专门针对 tds 内的跨度

$(文档).ready(函数(){ $('td span').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的.text()函数，html转义了<>字符，无意中将> <添加到dom中，而.html实际上输出了正确的标签