Get selection

On this page I give the simple code you need for finding out what text the user has selected with his mouse.

Example

First of all, select some text on this page and press the button or the link below:

The script

The script that is executed when you click on the link or the button is extremely simple:

function getSel()
{
	if (document.getSelection) txt = document.getSelection();
	else if (document.selection) txt = document.selection.createRange().text;
	else return;

	document.forms[0].selectedtext.value = txt.replace(new RegExp('([\\f\\n\\r\\t\\v ])+', 'g')," ");
}

Explanation

Not surprisingly, there are two ways of finding out what text is selected, one for Netscape and one for Explorer. Netscape (and iCab) use the method document.getSelection(), while Explorer uses document.selection .

Netscape script

So we start with seeing if the browser supports getSelection. If it does, make txt the selected text

	if (document.getSelection) txt = document.getSelection();

and you're ready.

Explorer script

Explorer uses document.selection. So if the browser supports it we have to create a Range. I have no idea what a Range is, but Microsoft in its ineffable wisdom has decided that we should Create one, so we do and its property text from our Range. This is the text selected by the user:

	else if (document.selection) txt = document.selection.createRange().text;

Other browsers

If the browser supports neither getSelection() nor selection we cannot find out what text the user has selected and we should end the function.

else return;

The regular expression

Then we define a regular expression that embraces all whitespace characters (hard returns, tabs, spaces etc.). Later on we'll need to filter them out of the text because otherwise it would be full of these extra characters and other scripts could choke on them when you start messing about with the string.

new RegExp('([\\f\\n\\r\\t\\v ])+', 'g');

Now replace all whitespace characters with a space and write it to the textarea.

	document.forms[0].selectedtext.value = txt.replace(new RegExp('([\\f\\n\\r\\t\\v ])+', 'g')," ");
}

Of course you should add a script here that does something with the selected text.

Use MouseDown

Whether you want to use a button or a link to get the selection, always use the mouseDown event handler to call the script.

<INPUT TYPE=button VALUE="Get selection" onMouseDown="getSel()">
<A HREF="#" onMouseDown="javascript:getSel(); return false"
	CLASS="page">Get selection</A>

Netscape and Explorer 4 each have their specific problems when you use an onClick. Of course, what's a problem in one browser works fine in the other.

Netscape 4

Netscape 4 un-selects a text when you press the mouse button. Since an onClick event fires after the mouse button has been released, you would lose the selected text. The onMouseDown event fires just before Netscape 4 un-selects the text, so the script can still grab it. If you add the

return false

to the action, you cancel the unselecting of the text. I've done that so that Netscape 4 users can also compare their selected text to the text in the textarea.

Furthermore, Netscape 4 does not see any selected texts inside form fields (try selecting text inside the textarea).

Finally, the button does not work in Netscape 4 on Linux because it does not support the onMouseDown event handler on buttons. The link works fine, though.

Explorer 4

Explorer 4 has the same problem as Netscape 4, but then with the button. When you click on a button, the text is un-selected. Therefore, also use the mouseDown event handler here. Unfortunately adding return false does not have any effect: the text is still un-selected.

Home