将标签中的文本转换为超链接

Question

将标签中的文本转换为超链接

jqueryhtmlhyperlink

9

更新：
第三个答案最终效果最好。我很可能在其他建议方面做错了什么；第三个答案可能是最容易实现的。如果您感兴趣，可以在这里找到我尝试的示例解决方案（目前）：

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

原始帖子：
我有一个纯文本网站地址，位于标签内。我想将该标签更改为具有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>

- ox4dboy

你能把一个类添加到输出的span元素吗？ - Josh

不过，我可以用另一个带有类的 span 将输出 span 包装起来，这样它就会变成 http://www.domain.com/about。 - ox4dboy

使用for-each循环遍历特定元素。 - Michael Jasper

5个回答

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();

查看演示

- rahul

可能像其他的一样搞砸了，但这对我也不起作用，请看这里： https://dl.dropbox.com/u/1007716/spanToUrl/test05.html - ox4dboy

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>

以上代码未经测试，但应该会指导你朝着正确的方向前进。

- Simon H

.replaceWith() 可以遍历一个集合，所以不需要将其包装在 each 中。请参见我的答案。 - Ori

尝试了一下这里的代码： https://dl.dropbox.com/u/1007716/spanToUrl/test01.html但是在我的页面上无法运行，即使在jsfiddle上可以，链接在这里：http://jsfiddle.net/GyK3q/ - ox4dboy

2

使用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);

- Rob Lee

没用，我在这里尝试了这个解决方案： https://dl.dropbox.com/u/1007716/spanToUrl/test04.html - ox4dboy

1

也许可以这样做：（不需要知道ids/classes）使用jquery的for-each循环，特别是针对td内部的spans。

~~$(document).ready(function(){ $('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中添加了&GT; &LT;，而实际上应该使用.html输出正确的标签

- Michael Jasper

哇，喜欢这个社区。有这么多潜在的答案，新手该如何选择呢？感谢提供 jsfiddle 链接 - 我忘了那个网站了。我不确定哪个答案是最好的，我会在 CMS 中测试几个看看是否有效。 - ox4dboy

我双重嵌套并修改了脚本以反映双重跨度，它接近工作，但输出不太正确。单引号似乎需要变成双引号才能正常工作。请参见： http://dl.dropbox.com/u/1007716/spanToUrl/test02.html - ox4dboy

太棒了，很高兴看到它离你的目标越来越近！当你成功地让它运行起来时，别忘了将最有帮助的答案标记为解决方案！ - Michael Jasper

答案已标记，经过一些测试确定了哪个是最好的。上面编辑过的代码也可以工作，但它会产生一些无效的HTML。示例可以在这里看到： https://dl.dropbox.com/u/1007716/spanToUrl/test06.html - ox4dboy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ori · Accepted Answer

试试这个：

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

不需要使用each，因为replaceWith可以遍历多个元素，并且可以将函数作为参数传递。

从你提供的HTML代码来看，只有第一个<td> 包含一个URL。如果确实只有一个，请将first()添加到选择器链中，像这样：

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

如果需要操作的是包含链接的整个列，那么你需要针对每个匹配项进行操作。可以通过在选择器后添加:even来实现这一点，如下所示：

If it is rather the entire column that contains links, than you'll want to operate on every other match. Do this by appending :even to your selector, like this:

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

(是的，使用 :even 而不是 :odd 选择第1、3、等等元素，因为索引从0开始。)

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

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