将 的文本转换为超链接

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

原始帖子：
我在 标记内有一个纯文本网站地址。我想改变这个使用 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 的 。如果确实只有一个，您可以将 first() 添加到选择器链中，如下所示：

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

如果是包含链接的整个列，那么您将想要对所有其他比赛进行操作。通过将 :even 附加到选择器来执行此操作，如下所示：（

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

是的，:even 而不是 :odd 来选择第 1 个、第 3 个、 &c. 元素，因为基于 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

将跨度设置为 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();

查看工作演示

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 实际上输出了正确的标签