5202

ein Blog über technische Fragen zu Blogger

Text in Links umwandeln

von

Update: Bug ausgebessert - Links und kursive Texte haben jetzt wieder einen Abstand!

Auf das folgende Problem hat mich ein Leser angesetzt - und zwar wollte dieser Leser wissen, wie er in seinen Kommentar automatisch alle Text-Links zu klickbaren Links umwandeln kann.

Das ihr URLs in einen Kommentar hinterlassen könnt ist klar, obwohl die wenigsten wissen wie das geht. Meistens schreiben dann so was raus wie: Toller Post - Lust auf gegenseitiges verfolgen? www.spamblogger.blogspot.com :D!

Diese reinen Text www.spamblogger.blogspot.com automatisch in einen klickbaren Link umzuwandeln, wäre doch eine nette Idee, oder?

Also, wie geht das?

Probleme ...

In einem WP Blog würdet ihr das mit PHP machen ... da ihr das in Blogger nicht habt, müsst ihr statt dessen jQuery nehmen.

Das Problem dabei ist, dass ihr Links in verschiedene Schreibweisen angeben könnt .. einfaches Beispiel: Ihr könnt meine Blog-URL als http://www.5202.de/ oder als www.5202.de/ schreiben.

Es gibt bei URLs also keine 'Standardschreibweise', sondern verschiedene Möglichkeiten, die sich strukturell unterscheiden. Wenn ihr nun ein Script schreibt, dass euren Text nach möglichen Links durchsucht, muss dieses Script alle diese verschiedenen Möglichkeiten erkennen.

Das wird nach kurzer Zeit eine relativ komplexe Aufgabe und die Scripte dafür sind dementsprechend groß. Ich wollte nun nichts perfektes machen, sonden nur etwas, was einigermassen im Alltag funktioniert.

Was mach das Script?

Das Script ist eine Anpassung eines bestehenden Scriptes an Blogger und wandelt euch in den Kommentare automatisch alle Text-Links wie http://www.5202.de/ oder www.5202.de/ zu klickbaren URLs um. Nicht mehr - nicht weniger :D!

Das Script

Das Script anzuwenden ist denkbar einfach - ihr sucht unter Vorlage > HTML bearbeite den folgenden schließenden Tag [ganz weit unten - schaut bitte genau!]

</html>

Direkt _darüber_ kopiert ihr folgendes Script:

<script src='http://code.jquery.com/jquery-1.9.1.min.js'/>
<script type='text/javascript'>
 //<![CDATA[
(function($){

  var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
      url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/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, '&amp;')
                         .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);
jQuery('.comment-content').linkify();
$('.comment-content i, .comment-content b, .comment-content a').append(" ").prepend(" ");
 //]]>
</script>

Speichern - Fertig - work done!

Hilfe - ein Link funktioniert nicht!

Falls ihr dieses Script verwendet und hilfreich findet und wider Erwarten ein bestimmter Text-Link nicht korrekt in eine URL umgewandelt wird, dann hinterlasst bitte einen Kommentar und ich werde mir das anschauen - wenn ich sonst nichts zu tun habe, erweitere ich das Script entsprechend.