One of the requested features for Typity.com was the ability to navigate links in the textarea without having to highlight, copy, and paste them into the user’s browser URL input. I thought it would be simple to code some javascript to parse the URL around the cursor’s position. I was sadly mistaken. The methods and properties for textarea are a ridiculous mess and very non-standard. After a ton of trial and error, Googling for hours, and reading tons of documentation, I was able to piece together the following code. Keep in mind that I am very new to javascript. This could probably be done much better and may have bugs though it seems to be working fine so far. It seems as if absolutely no one has been able to get this to work before so I figured I should share it with the rest of the internet.
View source code with tabs and spacing intact [typity.com].
/*
* MicroSwift graburl() (C) Copyright 2009 MicroSwift.com. All Rights Reserved.
* Created exclusively for use on Typity.com by Dustin Bolton
* Leave these top 3 lines if using this on your own site or editing, please.
*
* Last updated: 7/17/09. Now works in FF & Internet Explorer.
*
* EXAMPLES:
* graburl(textareaobject)
* Returns the url found touching the user’s current cursor position.
* User may have to click first in the area sometimes. Not sure of a workaround
* Only tested in firefox so far!
* I hate textarea javascript… textarea is designed so poorly and inconsistent.
*
*/
function graburl(o) {
if (o.setSelectionRange) {
o.focus();
caret=o.selectionStart; // Set initial caret position when clicked.
// Find beginning of url
i=caret;
linestart=-1;
while(i>0) {
charcode=o.value.substring(i-1,i).charCodeAt(0);
if ((charcode==10)||(charcode==32)) { // If line feed or space, reached left border
linestart=i;
i=-1; // branch out
}
i=i-1;
}
if (linestart==-1) { linestart=0; } // Hit BOF
// Find end of url
i=caret;
lineend=-1;
while((i0)) {
charcode=o.value.substring(i-1,i).charCodeAt(0);
if ((charcode==10)||(charcode==32)) { // If line feed or space, reached left border
lineend=i-1;
i=-1; // branch out
}
i++;
}
if (lineend==-1) { lineend=o.value.length; } // Hit EOF
url=o.value.substring(linestart,lineend);
} else if (o.createTextRange) { // Internet Explorer
r=o.createTextRange();
r.moveToPoint(window.event.x, window.event.y);
//r.expand(“character”);
r.moveStart(‘character’,-1);
// Start at cursor and go left until we hit a space or weird character.
i=0;
leftline=”;
done=false;
while( (i>-9999)&&(done==false) ) {
r.moveStart(‘character’,-1); // Step caret left one position (move START first!!!)
r.moveEnd(‘character’,-1); // Step caret left one position
if ( (r.text.charCodeAt(0)==32) || (isNaN(r.text.charCodeAt(0))) ) {
done=true;
} else {
leftline=r.text+leftline;
i=i-1;
}
}
// Move cursor back to original point.
i=i*-1;
r.moveEnd(‘character’,i); // Step caret right one position (move end FIRST!!!)
r.moveStart(‘character’,i); // Step caret right one position
// Start at cursor and go right until we hit a space or weird character.
i=0
rightline=”;
done=false;
while( (i<9999)&&(done==false) ) {
r.moveEnd(‘character’,1); // Step caret right one position (move end first)
r.moveStart(‘character’,1); // Step caret right one position
if ( (r.text.charCodeAt(0)==32) || (isNaN(r.text.charCodeAt(0))) ) {
done=true;
} else {
rightline=rightline+r.text;
i++;
}
}
url=(leftline+rightline);
}
// url=suspected url. Check it for http and stuff…
if ( (url.substring(0,7).toLowerCase()==’http://’) || (url.substring(0,8).toLowerCase()==’https://’) || (url.substring(0,5).toLowerCase()==’ftp://’) ) {
return url;
} else {
return ‘error’;
}
}