JavaScript Text Linkerkennung – Hyperlinks erzeugen

Posted: Juni 29th, 2012 | Filed under: Internet, Java, Programmieren, Tutorials | Tags: , , , , , , | 3 Comments »

Facebook, Twitter oder sonstige soziale Kommunikationsplattformen verwenden es bereits. Eine automatische Linkerkennung die auf benutzerbasierten Inhalten angewendet wird. Mit Hilfe der Bibliothek XRegExp und nach stundenlanger Internetrecherche habe ich es endlich geschafft. Die folgende Methode erkennt automatisch URLs in einem Text und ersetzt diese mit einem Hyperlink zu der jeweiligen URL. Vorteil dabei ist, dass der Benutzer den Link nicht mehr per Hand in die Kopfzeile seines Browsers kopieren muss sondern einfach per Klick den jeweiligen Link öffnen kann.

WICHTIG: Es wird die Bibliothek XRegExp (3.5 KB) benötigt!


// JavaScript - Methodenerweiterung der String-Klasse
// String s an Stelle idx einfügen und rem Zeichen löschen.
// rem normalerweise immer = 0
String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

// Ersetzungslogik: <a href="[LINK]" target="_blank">[LINK]</a>
var insertString1 = "<a href=\"";
var insertString2 = "\"  target=\"_blank\">";
var insertString3 = "</a>";

// JavaScript-Methode - URLs im Text zu Hyperlinks machen
function parseTextToLinks(text){
	var positionOffset;
	var startPos;
	var endPos;

	// Regulärer Ausdruck - Linkerkennung
	var regex = XRegExp.globalize(/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:\'\".,<>?]))/);
	regex.global;

	// Hilfsvariablen
	var newText = text;
	positionOffset = 0;

	while (match = regex.exec(text)) {
		startPos = match.index;
		endPos = startPos + match[0].length;

		newText = newText.splice(startPos + positionOffset, 0, insertString1);
		positionOffset += insertString1.length;

		newText = newText.splice(endPos + positionOffset, 0, insertString2);
		positionOffset += insertString2.length;

		newText = newText.splice(endPos + positionOffset, 0, match[1]);
		positionOffset += match[1].length;

		newText = newText.splice(endPos + positionOffset, 0, insertString3);
		positionOffset += insertString3.length;
	}
	return newText;
}

3 Comments on “JavaScript Text Linkerkennung – Hyperlinks erzeugen”

  1. 1 Björn said at 10:13 on Juni 29th, 2012:

    Sowas macht man doch nicht clientseitig…

  2. 2 admin said at 10:16 on Juni 29th, 2012:

    Und wieso nicht?

    EDIT: Das kann man so pauschal nicht sage, prinzipiell gebe ich dir Recht, jedoch nur bei klassischen non-ajax Webanwendungen. Ich habe den Algorithmus jedoch für eine Full-Ajax-Webanwendung benötigt die möglichst nahe an Echtzeit einen bestehenden Text umformatieren soll. Serverseitiges parsen bzw. umwandeln würde in meiner Anwendung wegen den Request- und Responsezeiten viel zu lange dauern(Applikation erhält den Text nur im Rohformat, kein vorheriges umformatieren möglich da sonst andere Funktionalitäten eingeschränkt sind.). Prinzipiell kann der Code sogar serverseitig verwendet werden Beispielsweise mit der serverseitigen JavaScript Engine: node.js.

    Viele Grüße

  3. 3 Anna said at 23:18 on März 13th, 2014:

    Guten Tag,

    wissen Sie vielleicht auch wie man so einen Link dann auch auslesen kann? Ich habe leider bis jetzt nichts gefunden, wie man das via Javaskript lösen kann. Mein Plan wäre halt dann wie bei Facebook. Wenn man bei Nachrichten einen Link einfügt (z.B.: Youtube) werden die Metadaten ausgelesen und sofort grafisch mit Bild dargestellt. Kleiner Tipp wäre super !!

    Liebe Grüße


Leave a Reply