How to add anchor tag to a URL from text input

Question

I want to be able to take user inputted text in a comment field and check for URL type expression, and if it exists, add an anchor tag (to url) when the comment is displayed.

I am using PHP on the server-side, and Javascript (with jQuery) on client, so should I wait to check for URL until right before it is displayed? Or add the anchor tag before inserting it in the database?

so

<textarea id="comment">check out blahblah.com or www.thisthing.co.uk or http://checkthis.us/&lt;/textarea&gt;

becomes

<div id="commentDisplay">check out <a href="blahblah.com">blahblah.com</a> or <a href="www.thisthing.co.uk">www.thisthing.co.uk</a> or <a href="http://checkthis.us/"&gt;http://checkthis.us/&lt;/a&gt;&lt;/div&gt;

Answer 1

First, a request. Don't do this before writing the data to the database. Instead, do it before displaying the data to the end-user. This will cut down on all confusion, and will allow you more flexibility in the future.

One example found online follows:

$text = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@', '<a href="$1">$1</a>', $text);

And a much more thorough one from daringfireball.net:

/**
 * Replace links in text with html links
 *
 * @param  string $text
 * @return string
 */
function auto_link_text($text)
{
   $pattern  = '#\b(([\w-]+://?|www[.])[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/)))#';
   $callback = create_function('$matches', '
       $url       = array_shift($matches);
       $url_parts = parse_url($url);

       $text = parse_url($url, PHP_URL_HOST) . parse_url($url, PHP_URL_PATH);
       $text = preg_replace("/^www./", "", $text);

       $last = -(strlen(strrchr($text, "/"))) + 1;
       if ($last < 0) {
           $text = substr($text, 0, $last) . "&hellip;";
       }

       return sprintf(\'<a rel="nowfollow" href="%s">%s</a>\', $url, $text);
   ');

   return preg_replace_callback($pattern, $callback, $text);
}

Answer 2

Personally, I would mark it up with JS right before displaying, seems more professional and sustainable than editing the user's comment yourself.

Answer 3

I would rather do that in the server side. Javascript has a "lag"; it runs only when the entire HTML DOM tree is been loaded and displayed in the webbrowser. Thus it may take a (although short) while before the URL's are recognized and parsed. The client may see the links instantly been replaced while he is still facing the content. This might lead to "wtf?" experiences at the client side. This is nowadays too quickly related to advertisting/spam/spyware. You should avoid that as much as possible. Don't use JS to change the content onload, rather do it only during user-controlled events (onclick, onchange, onfocus, etc). Use the server side language to change content prior to save or display.

So, just look for a PHP script which parses the text (or uses regex) to construct fullworthy links based on URL's in plain text. You can find a lot here. Good luck.

Answer 4

I adapted Jonathan Sampson's regex option so that it is more lenient about what is a domain (doesn't need http(s) to qualify).

function hyperlinksAnchored($text) {
    return preg_replace('@(http)?(s)?(://)?(([-\w]+\.)+([^\s]+)+[^,.\s])@', '<a href="http$2://$4">$1$2$3$4</a>', $text);
}

Works for these URLs (and successfully leaves out trailing period or comma):

http://www.google.com/
https://www.google.com/.
www.google.com
www.google.com.
www.google.com/test
google.com
google.com,
google.com/test
123.com/test
www.123.com.au
ex-ample.com
http://ex-ample.com
http://ex-ample.com/test-url_chars.php?param1=val1.
http://ex-ample.com/test-url_chars?param1=value1&param2=val+with%20spaces

Hope that helps someone.