Creating auto-clickable urls

 

In message boards and in the comment areas of websites, it's often possible for someone to post a comment and point to one or more urls. Unfortunately, most if not all websites expose rather rudimentary means to enter comments. As a result, the comments pointing to one or more urls lack the following :

  • urls are not clickable. Before a user can see the actual web page pointed by an url, he has to select the actual url string. At this point it is further made weak because selection in web pages is harder than in a text editor. Then, the user must copy the string into the clipboard, fire up a new browser instance, paste the string into the address bar, hit enter, and hopefully the web page appears after a while. If linking documents across the web was such a pain, I am afraid the internet wouldn't be the way it is.
  • html is often forbidden because of security reasons. It is indeed possible to use a few cross-scripting tricks to cause unexpected behaviors and potentially damage the privacy of users. Since html tags are often filtered out, the user comes out of luck whenever it comes to adding a few urls in comments. But, although the user won't be given the chance to add html, the webmaster may add html when the user clicks the submit button, that is at a point where there is no more interaction.

The remainder of the article provides two ways to add auto-clickable urls to comments or any other text area. The first is a non-interactive technique to convert urls into clickable urls. The other is a full fledged interactive technique providing an elegant way to add clickable urls without being seen.

 

1. Automatically turning urls into clickable urls

It may be invoked either when the user clicks a special command button, or simply when he submits a form.

A javascript routine is executed, parses the content of the comment area using a regular expression, and replaces all urls by anchored urls. Anchored urls have the necessary html tags to ensure that users will be able to click on them. Of course, to avoid reentrance, the regular expression makes the difference between urls and already clickable urls.

The code goes like this. Suppose we have a form where users type some content in a text area named body. The form has a submit button that when activated executes the following routine :

 

<script language="javascript">
//
// create auto-links. Replace any url to cliquable urls. All existing clickable urls are left as is.
// we assume we have a form with a text area whose name is "body"
//
// S.Rodriguez. August 5, 2003.
//
// supported browsers : Netscape, Mozilla, Internet Explorer
//
function autolink(s) 
{   
   var hlink = /\s(ht|f)tp:\/\/([^ \,\;\:\!\)\(\"\'\<\>\f\n\r\t\v])+/g;
   return (s.replace (hlink, function ($0,$1,$2) { s = $0.substring(1,$0.length); 
                                                   // remove trailing dots, if any
                                                   while (s.length>0 && s.charAt(s.length-1)=='.') 
                                                      s=s.substring(0,s.length-1);
                                                   // add hlink
                                                   return " " + s.link(s); 
                                                 }
                     ) 
           );
}

function doautolink()
{
   var bodycontent = document.forms["message"].elements["body"].value;
   bodycontent = autolink(bodycontent);
   document.forms["message"].elements["body"].value = bodycontent;
}
</script>

<!-- and now the form itself -->
<form name="message" method="post" 
      action="NewArticle.php?qs_submit=1" 
      enctype="multipart/form-data">
  <textarea name="body" rows="8" cols="60"></textarea>
  <input type="button" value="Autolink" onclick="doautolink()">
</form>

This code automatically adds anchors to urls so they are made clickable. And works on both Netscape Mozilla and Internet Explorer. Notice that no text selection is required.


Plain text in the comment area of a message board


Resulting text after the user pressed the Autolink button

What now if we are willing to create anchors interactively? For instance, a standard way to link to some document is to have an url prepared in the clipboard, and then manually embed the anchor html tag to it : <a href="..." target=_blank title="...">...</a>. This anchor would create an hyperlink which would open a new browser window and provide a tooltip when the mouse is over it. Next section discusses this.

 

2. Interactively turning urls into clickable urls

Interactively creating clickable urls is something much needed in the text area. It is not amazingly odd to introduce a dedicated button at this point, next to the submit button. We add a create link button which, when clicked, replaces the current selection in the text area with a full fledged hyperlink.

In order to make things simple enough, the current selection in the text area is what will become the actual decorated text. So if you are say willing to add a link to a click here, just select those two words and click the button.

Clicking the button executes javascript code, basically extracts the current selection and then replaces it with an anchor of the form <a href="AAAAAAAA" target=_blank title="Open in a new window">TTTTTTTT</a>, where AAAAAAAA is the actual hyperlink and TTTTTTTT is the selected text.

We can actually take advantage of advanced Internet Explorer capabilities (from JScript, which is not standard javascript) and use the content of the clipboard to replace the AAAAAAAA placeholder as well with the actual hyperlink. To exemplify how this could work like a charm, just make sure to have an hyperlink in your clipboard.

Thanks to that paste from the clipboard, the creation of hyperlink is really intuitive. The process can be sumed up as follows :

  1. Make sure to have an url in your clipboard
  2. Select something in the text area in your form
  3. Click create link


The user enters some text in the comment area, while having an url waiting in the clipboard


Then he selects the insertion point for the url


Resulting text, after the user pressed the Create link

For the clipboard portion of code to work seamlessly, Internet Explorer must be allowed to paste content, which is the default setting. In case not, bring up the Internet Explorer options, Security tab, Internet Zone, and choose "Allow paste operations" in the options.

Now for the actual code :

 
<script language="javascript">
//
// create an hyperlink on the fly, on the current text selection.
// we assume we have a form with a text area whose name is "body"
//
// S.Rodriguez. August 5, 2003.
//
// supported browser : Internet Explorer
//
function createlink()
{
  var sel = document.selection.createRange();
  if (sel == null) return;

  // replace the text selection
  var szText = sel.text;
  szText = "<a href=\"PLACEHOLDER\" target=_blank title=\"Open in a new window\">" + 
           szText + "[^]</a>";
  sel.text = szText;

  // replace anchor placeholder with clipboard content
  var r = document.all["body"].createTextRange();
  r.findText("PLACEHOLDER");
  r.select();
  r.execCommand("Paste"); // Internet Explorer only
}
</script>

<!-- and now the form itself -->
<form name="message" method="post" 
      action="NewArticle.php?qs_submit=1" 
      enctype="multipart/form-data">
  <textarea name="body" rows="8" cols="60"></textarea>
  <input type="button" value="Create link" onclick="createlink()">
</form>

The bonus track is that the hyperlink opens in a new browser window, without additional effort.

 

 

Stéphane Rodriguez - August 5, 2003.

 
Home
Blog