jQuery Text zu verknüpfen Skript?

Question

Kennt jemand ein Skript, das alle Textverweise auf URLs auswählen und automatisch durch Anchor-Tags ersetzen kann, die auf diese Orte verweisen?

For example: 

http://www.google.com 

would automatically turn into 

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

Anmerkung: ich dies wollen, weil ich will sie nicht gehen durch alle meine Inhalte und wickeln mit Anker-Tags.

Answer 1

JQuery wird Ihnen hier nicht viel helfen, da Sie sich nicht wirklich mit der DOM-Traversierung/Manipulation beschäftigen (abgesehen von der Erstellung des Anchor-Tags). Wenn alle Ihre URLs in < p class = "url" > Tags wären, dann vielleicht.

Eine Vanille-JavaScript-Lösung ist wahrscheinlich, was Sie wollen, und wie das Schicksal es haben würde, this guy should have you covered.

Answer 2

Ich schlage vor, Sie tun dies auf Ihren statischen Seiten vor dem Rendern im Browser, oder Sie werden die Last der Konvertierung Berechnung auf Ihre armen Besucher schieben. :) Hier ist, wie Sie es in Ruby tun könnte (von stdin zu lesen, zu schreiben stdout):

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

Offensichtlich sollten Sie darüber nachdenken, wie diese so robust zu machen, wie Sie es wünschen. Das oben genannte erfordert, dass alle URLs mit http beginnen und prüfen, dass URLs, die in Anführungszeichen gesetzt sind (d. H. Die sich bereits in einem < a href = "..." > befinden), nicht konvertiert werden. Es fängt nicht ftp: //, mailto: ein. Es wird glücklich Material in Orten wie <Skript> Körper konvertieren, die Sie möglicherweise nicht passieren möchten.

Die befriedigendste Lösung ist wirklich, die Konvertierung von Hand mit Ihrem Editor zu machen, so dass Sie alle Substitutionen ansehen und genehmigen können. A good editor können Sie regexp Substitution mit Gruppenreferenzen tun (aka zurück Referenzen), so sollte es keine große Sache sein.

Answer 3

Wenn Sie eine Lösung aus einer anderen Perspektive wollen ... Wenn Sie die Seiten über PHP und HTML Purifier ausführen können, kann es die Ausgabe automatisch formatieren und alle URLs verknüpfen.

Answer 4

HINWEIS: Eine aktualisierte und korrigierte Version dieses Skript jetzt bei https://github.com/maranomynet/linkify (GPL/MIT-Lizenz) verfügbar ist

---

Hmm ... mir scheint wie die perfekte Aufgabe für jQuery.

... so etwas wie dies kam die Spitze meiner Meinung ab:

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

Es wird versucht, schalten Sie alle Vorkommen der folgenden in Links:

• www.example.com/path
• http://www.example.com/path
• mailto:me@example.com
• ftp://www.server.com/path
• ... alle oben genannten in eckigen Klammern (d. H. < ...>)

Genießen :-)

Answer 5

Dadurch serverseitige keine Option manchmal ist. Denken Sie an einem Client-seitige Twitter-Widget (das direkt an Twitter-API JSONP geht), und Sie wollen dynamisch alle URLs in der Tweets Linkify ...

Answer 6

Werfen Sie einen Blick auf dieser JQuery-Plugin: https://code.google.com/p/jquery-linkifier/

Answer 7

ich habe diese Funktion i nennen

textToLinks: function(text) { 

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