编辑：这段代码效果更好：

Question

更新：
答案＃3最终工作得最好。我很可能对其他建议做错了; ＃3可能是最容易实现的。如果您很好奇，我可以在这里找到我尝试过的示例解决方案（现在）：

http://dl.dropbox.com/u/1007716/spanToUrl/test01.html
http://dl.dropbox.com/u/1007716/spanToUrl/test02.html
http://dl.dropbox.com/u/1007716/spanToUrl/test03.html（获胜者）
http://dl.dropbox.com/u/1007716/spanToUrl/test04.html
http://dl.dropbox.com/u/1007716/spanToUrl/test05.html
http://dl.dropbox.com/u/1007716/spanToUrl/test06.html

原始邮件：
我在<span>标记内有一个纯文本网站地址。我想改变那个＆lt; span＆gt;使用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和第1个元素，因为基于0的索引。）

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 /类）使用jquerys for-each循环，特别是在tds内部的目标跨度

<击> $（文件）。就绪（函数（）{ $（'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将<>个字符转义为无意添加&GT; &LT;到dom中，而.html实际上输出了正确的标记

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

5 个答案:

编辑：这段代码效果更好：