jQuery Text to Link Script?

Question

¿Alguien sabe de un script que puede seleccionar todas las referencias de texto a las URL y reemplazarlas automáticamente con etiquetas de anclaje que apuntan a esas ubicaciones?

For example: 

http://www.google.com 

would automatically turn into 

<a href="http://www.google.com">http://www.google.com</a> 

Nota: Estoy queriendo esto porque no quiero pasar por todo el contenido de mi y se envuelven con las etiquetas de anclaje.

Answer 1

JQuery no te va a ayudar mucho aquí, ya que no estás realmente interesado en la manipulación/cruce DOM (aparte de crear la etiqueta de anclaje). Si todas sus URL estaban en < p class = "url" > etiquetas, entonces tal vez.

Una solución de JavaScript vainilla es probablemente lo que quiere, y como el destino lo tiene, this guy should have you covered.

Answer 2

Te sugiero que hagas esto en tus páginas estáticas antes de renderizar en el navegador, o estarás cargando la carga del cálculo de conversión a tus visitantes pobres. :) He aquí cómo usted puede hacerlo en Ruby (lectura de la entrada estándar, escribiendo en la salida estándar):

while line = gets 
    puts line.gsub(/(^|[^"'])(http\S+)/, "\\1<a href='\\2'>\\2</a>") 
end 

Obviamente, usted querrá pensar acerca de cómo hacer esto tan robusta como se desee. Lo anterior requiere que todas las URL comiencen con http y verificará que no se conviertan las URL entre comillas (es decir, que ya estén dentro de < a href = "..." >). No detectará ftp: //, mailto :. Con gusto convertirá el material en lugares como <script> cuerpos, que es posible que no desee que suceda.

La solución más satisfactoria es realmente hacer la conversión a mano con su editor para que pueda mirar y aprobar todas las sustituciones. A good editor le permitirá hacer la sustitución de regexp con referencias de grupo (también conocidas como referencias anteriores), por lo que no debería ser un gran problema.

Answer 3

Si desea una solución desde otra perspectiva ... si puede ejecutar las páginas a través de php y HTML Purifier, puede autoformato la salida y vincular las URL.

Answer 4

NOTA: una versión actualizada y corregida de este guión ya está disponible en https://github.com/maranomynet/linkify (licencia GPL/MIT)

---

Hmm ... me esto parece la tarea perfecta para jQuery.

... algo como esto salió de la parte superior de la cabeza:

// Define: Linkify plugin 
(function($){ 

    var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g, 
     url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g, 

     linkifyThis = function() { 
     var childNodes = this.childNodes, 
      i = childNodes.length; 
     while(i--) 
     { 
      var n = childNodes[i]; 
      if (n.nodeType == 3) { 
      var html = $.trim(n.nodeValue); 
      if (html) 
      { 
       html = html.replace(/&/g, '&') 
         .replace(/</g, '&lt;') 
         .replace(/>/g, '&gt;') 
         .replace(url1, '$1<a href="http://$2">$2</a>$3') 
         .replace(url2, '$1<a href="$2">$2</a>$5'); 
       $(n).after(html).remove(); 
      } 
      } 
      else if (n.nodeType == 1 && !/^(a|button|textarea)$/i.test(n.tagName)) { 
      linkifyThis.call(n); 
      } 
     } 
     }; 

    $.fn.linkify = function() { 
    return this.each(linkifyThis); 
    }; 

})(jQuery); 

// Usage example: 
jQuery('div.textbody').linkify(); 

Se intenta convertir todas las apariciones de la siguiente en enlaces:

• www.example.com/path
• http://www.example.com/path
• mailto:me@example.com
• ftp://www.server.com/path
• ... todo lo anterior está envuelto en corchetes angulares (es decir < ...>)

Enjoy :-)

Answer 5

Hacer esto del lado del servidor no es una opción veces. Piense en un widget del lado del cliente de Twitter (que va directamente a la API de Twitter usando jsonp), y que desea Linkify todas las URLs de los Tweets de forma dinámica ...

Answer 6

Tome un vistazo a este plugin jQuery: https://code.google.com/p/jquery-linkifier/

Answer 7

tengo esta función que llamo

textToLinks: function(text) { 

    var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g; 
    return text.replace(re, "<a href=\"$1\" title=\"\">$1</a>"); 
    }