javascript - example - jQuery Text to Link Script?

smooth scroll bootstrap

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo reemplazar URL simples con enlaces? 21 respuestas

¿Alguien sabe de una secuencia de comandos 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: deseo esto porque no quiero revisar todo mi contenido y envolverlo con etiquetas de anclaje.

Answer 1

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

Answer 2

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

Answer 3

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

Una solución de JavaScript de vanilla es probablemente lo que quieres, y como el destino lo tendría, este tipo debería tener cobertura .

Answer 4

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

Answer 5

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. :) Así es como puedes hacerlo en Ruby (leyendo de stdin, escribiendo en stdout):

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

Obviamente, querrás pensar cómo hacer que esto sea tan sólido como lo desees. Lo anterior requiere que todas las URL comiencen con http y verificará que no se conviertan las URL entre comillas (es decir, que ya se encuentren dentro de un <a href=".."">">). No detectará ftp: //, mailto :. Con mucho gusto convertirá el material en lugares como cuerpos de <script>, 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. Un buen editor le permitirá hacer la sustitución de expresiones regulares con referencias grupales (también conocidas como referencias retrospectivas), por lo que no debería ser un gran problema.

Answer 6

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>");
  }

Answer 7

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

Hmm ... para mí esto parece ser la tarea perfecta para jQuery.

... algo así salió de mi mente:

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

Intenta convertir todas las ocurrencias de lo siguiente en enlaces:

• www.example.com/path
• http://www.example.com/path
• mailto:[email protected]
• ftp://www.server.com/path
• ... todo lo anterior está envuelto en corchetes angulares (es decir, < ... > )

Disfruta :-)