How to make url clickable?

@QueenZAug 09.2008

OK, so when i input text in textarea “http://www.wedeveloper.com/” it doesn’t make it like url with <a href=”http://www.wedeveloper.com/”>http://www.wedeveloper.com/</a> but makes it like text.. ?

How can i make it like that..? Please help!

to post a comment

JavaScript

24 Comments(s) _↴

@felgallAug 09.2008 — #Textareas as their name suggests contain text and nothing but text. You can only make it clickable once you move it out of the text area into the HTML. Most forums including this one use what is called BBcode to identify the HTML markup that is to be inserted around the text they enter (so as to restrict what HTML can be used). The BBcode for a link lis [ url ] [ /url ] (without the spaces) or you can press the button at the top of the textarea showing the world with a link in front to insert it for you.

@QueenZauthorAug 09.2008 — #I don't need it clickable in textarea but when i enter text in text area, then i innerHTML it to <div> content and then i need it to be in format like <a href="...">....</a> but it's just a text ... ?

Please help!

@QueenZauthorAug 09.2008 — #P.S. I really don't need any bbcodes here... all i need is it to make it in format with <a> not only as a text...

@HoboScriptAug 10.2008 — #Then write logic that seeks out a link... probably best to use a regex. And the reformat it before throwing it into an innerHTML.

So the logic would be:

Find links

Add in anchor logic

Put into innerHTML

@QueenZauthorAug 10.2008 — #Yes, but i have no ideas how to do this... I need to find http i gues and then add <a> or something.. but i don't know how to do this.. ?

Please help guys..

@Logic_AliAug 10.2008 — #Yes, but i have no ideas how to do this... I need to find http i gues and then add <a> or something.. but i don't know how to do this.. ?

Please help guys..[/quote]The innerHTML version is much simpler but we don't go there.

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Text to Link&lt;/title&gt;
 &lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1"&gt;
 &lt;style type='text/css'&gt;
 a:link.linkElem{font-weight:bold}
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action=""&gt;
 &lt;p&gt;
 &lt;textarea cols='50' rows='6' onkeyup='TextToLink.create("linkElem", this.value)'&gt;Enter a URL here. http://&lt;/textarea&gt;
 &lt;/p&gt; 
 &lt;/form&gt;
 &lt;p&gt;
 &lt;div id='linkElem'&gt;&lt;/div&gt;
 
 &lt;script type='text/javascript'&gt;
 
 var TextToLink=
 {
 data:[/*28432973637269707465726C61746976652E636F6D*/],
 
 create:function(elemId, inpStr)
 {    <br/>
 var str="", obj=this.data[elemId]; 
 
 if( !this.data[elemId] )
 {
 obj=this.data[elemId]={};  <br/>
 obj.opElem=document.getElementById(elemId);
 
 <i>    </i>while(obj.opElem.firstChild)
 <i>    </i> obj.opElem.removeChild(obj.opElem.firstChild);
 
 <i>    </i>(obj.link=document.createElement('a')).appendChild(document.createTextNode("")); 
 <i>    </i>obj.link.target='_blank';
 <i>    </i>obj.link.className=elemId; 
 <i>    </i>obj.opElem.appendChild(obj.link); 
 }
 
 if( (str=inpStr.match(/(^|s)https?://.*(s|$)/)) )
 obj.link.href=str=str[0];  <br/>
 obj.link.replaceChild(document.createTextNode(str||""), obj.link.firstChild);    <br/>
 }
 }
 
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@QueenZauthorAug 10.2008 — #OK, i tested your example but it didn't work as i was expecting..

I typed a text like this..

I like this site - http://www.webdeveloper.com/ and also i like this site - http://www.apple.com

But i don't like this site - http://www.unknown.com[/QUOTE]

But i returned a text like this..

http://www.webdeveloper.com/ and also i like this site - http://www.apple.com

But i wanted it to return a text like this..

I like this site - http://www.webdeveloper.com/ and also i like this site - http://www.apple.com

But i don't like this site - http://www.unknown.com/[/QUOTE]

@IAmAnIdiotAug 10.2008 — #I'm not going to look over that code, but use a loop to parse out the links...

var tempInput = inputtext;

var linkArray = [];

var i = 0;

var tempIndex = 0;

while (tempInput.indexOf('http')!=-1) {

startindex = tempInput.indexOf('http');

stopindex = tempInput.substr(startindex).length;

tempIndex = tempInput.substr(startindex).indexOf(' ');

if (tempIndex > 0) && (tempIndex < stopindex) stopindex = tempIndex;

tempIndex = tempInput.substr(startindex).indexOf('. ');

if (tempIndex > 0) && (tempIndex < stopindex) stopindex = tempIndex;

tempIndex = tempInput.substr(startindex).indexOf(', ');

if (tempIndex > 0) && (tempIndex < stopindex) stopindex = tempIndex;

...

linkArray[i] = tempInput.substring(startindex, stopindex-1);

i++;

tempInput = tempInput.substr(stopindex);

}

in order to separate the links from the text.

Alternatively, if you want the text to remain intact but only change the url's into links, instead of searching the text, looking for 'http', and skipping all of the text from the start of the string to the occurance of 'http', you will have to concatenate that skipped-over text into a string variable and also put the links in that string variable as opposed to putting them into an array.

Unfortunately, though, there is no way to perfectly parse URL's unless you employ some code similar to UBB... e.g. [ url=www.webdeveloper.com] click me! [ /url]

@QueenZauthorAug 10.2008 — #I don't need to separate links from text i need to replace links without <a> with links with <a> in the string.. but i am not good at JavaScript so i don't know how to do this.. ?

For example, I enter a text like this..

I like this site - http://www.webdeveloper.com/ and also i like this site - http://www.apple.com/

But i don't like this site - http://www.unknown.com/[/quote]

And it should make it like this..

I like this site - http://www.webdeveloper.com/ and also i like this site - http://www.apple.com/

But i don't like this site - http://www.unknown.com/[/quote]

@QueenZauthorAug 10.2008 — #I also don't want any bbcodes here just this.. because it's not parsing urls automatically.. ? Please help..

@IAmAnIdiotAug 11.2008 — #I also don't want any bbcodes here just this.. because it's not parsing urls automatically.. ? Please help..[/QUOTE]

I'm not going to debug this, but it's probably a good start...

var tempInput = inputtext;
 var outputText = '';
 var parsedURL = '';
 var i = 0;
 var tempIndex = 0;
 
 while (i &lt; inputtext.length-1) {
 startindex = tempInput.indexOf('http');
 
 if startindex==-1) {
 outputText += tempInput.substr(i)
 i = inputtext.length - 1;
 }
 else {
 stopindex = tempInput.substr(startindex).length;
 tempIndex = tempInput.substr(startindex).indexOf(' ');
 if (tempIndex &gt; 0) &amp;&amp; (tempIndex &lt; stopindex) stopindex = tempIndex;
 tempIndex = tempInput.substr(startindex).indexOf('. ');
 if (tempIndex &gt; 0) &amp;&amp; (tempIndex &lt; stopindex) stopindex = tempIndex;
 tempIndex = tempInput.substr(startindex).indexOf(', ');
 if (tempIndex &gt; 0) &amp;&amp; (tempIndex &lt; stopindex) stopindex = tempIndex;
 
 if (startindex!=0) outputText += tempInput.substring(0, startindex - 1);
 parsedURL = tempInput.substring(startindex, stopindex-1);
 
 outputText += '&lt;a target="_blank" href="' + parsedURL + '"&gt;' + parsedURL + '&lt;/a&gt;';
 i+= stopindex;
 tempInput = tempInput.substr(stopindex);
 }

Then after that is done running, set a div's innerHTML equal to outputText.

@QueenZauthorAug 11.2008 — #I got error like this..

Error: syntax error

Source File: file:///C:/Users/QueenZ/Documents/hashboy.html

Line: 20, Column: 24

Source Code:

if (tempIndex > 0) && (tempIndex < stopindex) stopindex = tempIndex;

@QueenZauthorAug 11.2008 — #maybe there's something wrong with '&&'...

@HoboScriptAug 11.2008 — #http://weblogs.asp.net/farazshahkhan/archive/2008/08/09/regex-to-find-url-within-text-and-make-them-as-link.aspx

I'm not writing your code for you, but there are examples of how to find a URL in text and replace them as links. Obviously you need to "port" from those languages to javascript.

@QueenZauthorAug 11.2008 — #i have no ideas how to do it.. i am noob at js and really need it.. ? Please help!

@QueenZauthorAug 11.2008 — #good news guys! I found it!

Here is the code if someone else needs this too.

[code=php]	var newmsg = document.post.message.value;
 
  String.prototype.parseURL = function()
  {
   return this.replace(/[A-Za-z]+://[A-Za-z0-9-_]+.[A-Za-z0-9-_:%&?/.=]+/gi, function(url)
   {
   return url.link(url);
   });
  };
 
  newmsg = newmsg.parseURL();[/code]

I found this on this website - http://www.simonwhatley.co.uk/parsing-twitter-usernames-hashtags-and-urls-with-javascript

Problem solved!

@IAmAnIdiotAug 12.2008 — #I got error like this..

Error: syntax error

Source File: file:///C:/Users/QueenZ/Documents/hashboy.html

Line: 20, Column: 24

Source Code:

if (tempIndex > 0) && (tempIndex < stopindex) stopindex = tempIndex;[/QUOTE]

I'm a JS noob, so my syntax is going to be less than perfect. This will probably work:

<i>
 </i>     if ((tempIndex &gt; 0) &amp;&amp; (tempIndex &lt; stopindex)) stopindex = tempIndex;

I'd think it'd work, anyways.

@IAmAnIdiotAug 12.2008 — #good news guys! I found it!

Here is the code if someone else needs this too.

[code=php]	var newmsg = document.post.message.value;
 
  String.prototype.parseURL = function()
  {
   return this.replace(/[A-Za-z]+://[A-Za-z0-9-_]+.[A-Za-z0-9-_:%&?/.=]+/gi, function(url)
   {
   return url.link(url);
   });
  };
 
  newmsg = newmsg.parseURL();[/code]

I found this on this website - http://www.simonwhatley.co.uk/parsing-twitter-usernames-hashtags-and-urls-with-javascript

Problem solved![/QUOTE]

I'm a JS noob, so I can't quite follow how it works, but good job on finding what you needed.

@sugarbabeeAug 15.2008 — #Hi there, I'm trying to this exact same thing...how do you get that code to work with a textarea in a form? (the textarea I want to check has id/name="tips")

I tried adding an onClick to the submit button: onClick="document.write(tips.parseURL())", and also tried onSubmit, as well as trying just tips.parseURL() without the document.write

any ideas? (I'm not very good with Javascript so I don't really get what this code is doing or how to use it...)

Thanks in advance!

@HoboScriptAug 15.2008 — #Hi there, I'm trying to this exact same thing...how do you get that code to work with a textarea in a form? (the textarea I want to check has id/name="tips")

I tried adding an onClick to the submit button: onClick="document.write(tips.parseURL())", and also tried onSubmit, as well as trying just tips.parseURL() without the document.write

any ideas? (I'm not very good with Javascript so I don't really get what this code is doing or how to use it...)

Thanks in advance![/QUOTE]

Firstly use functions in your event triggers.

<i>
 </i>&lt;input type="button" onclick="useFunctions();" /&gt;

Then write a function that does what you want.

<i>
 </i>function useFunctions() {
 var tips = document.getElementById("tips");
 tips.innerHTML = tips.innerHTML.parseURL();
 }

I haven't tested this, but it should work.

@sugarbabeeAug 15.2008 — #thanks for your help ... should it still work if i use a submit button instead of just a button?

and also, i am getting a syntax error for the line:

return this.replace( (/[A-Za-z]+://[A-Za-z0-9-_]+.[A-Za-z0-9-_:%&?/.=]+/gi), function(url)

in firebug... any idea what that would be?

@Logic_AliAug 15.2008 — # i am getting a syntax error for the line:

return this.replace( (/[A-Za-z]+://[A-Za-z0-9-_]+.[A-Za-z0-9-_:%&?/.=]+/gi), function(url)

[/quote] The // should be escaped as: //

@sugarbabeeAug 15.2008 — #and theres the fix! Works perfectly now, thanks for the help!

@HoboScriptAug 15.2008 — #Also to add in this thread. I never knew about the String.link() method. That's pretty cool!

Also in #JavaScript _↴

My own browseFile button Calculators drop-down menu stuff

Success!

Help @QueenZ spread the word by sharing this article on Twitter...

Tweet This

How to make url clickable?

24 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to make url clickable?

24 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #JavaScript _↴