Convierta un texto de <span> en un hipervínculo

Question

ACTUALIZACIÓN:
La respuesta # 3 terminó trabajando de la mejor manera. Probablemente hice algo mal con las otras sugerencias; # 3 fue quizás el más fácil de implementar. Si tienes curiosidad, los modelos de soluciones que he intentado se pueden encontrar aquí (por ahora):

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

post original:
tengo una dirección de sitio web de texto sin formato dentro de una etiqueta <span>. Me gustaría cambiar eso <lapso> etiqueta en un hipervínculo adecuada con target="_blank"

He creado un ejemplo detallado de lo que tengo que trabajar aquí: http://bit.ly/spantourl

Si no desea clic a través, esto es lo que tengo:

<span>http://www.domain.com/about</span> 

y tengo que cambiar eso en:

<a href="http://www.domain.com/about" target="_blank">http://www.domain.com/about</a> 

Answer 1

Prueba esto:

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

No hay necesidad de each, ya que replaceWith puede iterar a través de múltiples elementos y puede tomar una función como parámetro.

En cuanto a su muestra HTML, veo que es solo la primera <td> que contiene una URL. Si hay de hecho una sola, puede agregar first() a la cadena de selección, así:

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

Si se trata más bien toda la columnaque contiene enlaces, lo que querrá operar en cualquier otro partido . Hacer esto añadiendo :even a su selector, así:

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

(Sí, :even y no :odd para seleccionar la primera, tercera, & c elementos, debido a la indexación de base 0..)

Answer 2

Put el lapso de un id y entonces usted puede hacer algo como

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

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

Cambio de acuerdo con tu edición

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

Ver una working demo

Answer 3

Es necesario tener algún tipo de identificación con el fin de hacer la conversión del nodo A al nodo B. Sugeriría algo a lo largo de las siguientes líneas:

El código de 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> 

El 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> 

El código anterior no se ha probado, pero es de esperar que debe conducir en la dirección correcta.

Answer 4

Use jQuery.

dar el lapso de un id: Código

<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

Tal vez algo como esto: (sin necesidad de conocer IDS/clases) jquerys useing fines de cada bucle y especificamente objetivo se extiende por el interior del TDS

$ (document) ready (function() {$ ('lapso td') .each (function() { $ (this) .text ("" + $ (this) .text() + ""); }); });

EDIT: este código funciona mucho mejor:

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

El original utiliza la función .text() de jQuery, que escapó de los html <> caracteres, sin querer addin > < en el DOM, mientras que en realidad emite la .html etiquetas correctas