Преобразование текста в гиперссылку

обновление:
Ответ №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>
8
html hyperlink jquery

5 ответов

попробуйте это:

$('.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 вашему селектору, вот так:

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

(да, :even, а не :odd чтобы выбрать 1-й, 3-й и c. элементы, из-за индексирования на основе 0.)

15

вам нужно иметь некоторую форму идентификации, чтобы выполнить преобразование из узла 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>

приведенный выше код не тестируется, но, надеюсь, приведет вас в правильном направлении.

2

использовать jQuery.

дайте span идентификатор:

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

поместите span id, а затем вы можете сделать что-то вроде

var linkText = $("#yourspanid").text();

$("<a/>").attr({"href": linkText, "target": "_blank"}).text(linkText).appendTo("body");
$("#yourspanid").remove();

изменение в соответствии с вашим edit

var elems = $("span.myClass > span");
elems.each(function(){
    var linkText= $(this).text();
    $("<a/>").attr({"href": linkText, "target": "_blank"}).text(linkText).appendTo("body");
});
elems.remove();

посмотреть рабочая демо

2

возможно, что-то вроде этого: (не нужно знать идентификаторы/классы) использование jquerys для каждого цикла и конкретно целевых диапазонов внутри tds

$(документ.)готовые(функция(){ $('td span').каждая функция(){ $(этот.)текст+ ""( $(этот.)текст+ )( ""); }); });

EDIT: этот код работает намного лучше:

<script type="text/javascript">
    $(document).ready(function(){
        $('td span').each(function(){
            $(this).html("<a href='" + $(this).html() + "' />" + 
                $(this).html() + "</a>");
        });
    });
</script>

оригинал используется .text() функции jquery, который html избежал <> символы, непреднамеренно добавить &GT; &LT; в дом, пока .html фактически выводит правильные теги

1