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