In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > methods > getSelection (window)

getSelection method (window)

Browser support:

9

Returns a selectionRange object representing the selected content in the current document.

Note: The getSelection method is supported in Internet Explorer from version 9.

The returned selectionRange object can be used to retrieve and modify the contents of the current selection.

Note: the selectionRange object represents the current state of the selection, not the state of the selection when the getSelection method was invoked. When the selection is modified, the selectionRange object is also modified. For further details, see the page for the selectionRange object.

Note: the getSelection method does not return the selection if the selected content is within an input:password, input:text or textarea element. For these cases, use the selectionStart and selectionEnd properties.

In older Internet Explorer versions (and optionally in newer ones as well), use the selection object to get the current selection.

Syntax:

object.getSelection ( );

You can find the related objects in the Supported by objects section below.

Return value:

Returns a selectionRange object that represents the current selection.

Example HTML code 1:

This example illustrates the use of the getSelection method to receive the text content of the current selection:

<head>
    <script type="text/javascript">
        function GetSelectedText () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var range = window.getSelection ();                                        
                alert (range.toString ());
            } 
            else {
                if (document.selection.createRange) { // Internet Explorer
                    var range = document.selection.createRange ();
                    alert (range.text);
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="GetSelectedText ()">Get the selected text!</button>
    Select some text!
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is similar to the previous one, but it retrieves the text content of the selection even if the selected content is within an input:text or textarea element.

<head>
    <script type="text/javascript">
        function GetSelectedText () {
            var selText = "";
            if (window.getSelection) {  // all browsers, except IE before version 9
                if (document.activeElement && 
                        (document.activeElement.tagName.toLowerCase () == "textarea" || 
                         document.activeElement.tagName.toLowerCase () == "input")) 
                {
                    var text = document.activeElement.value;
                    selText = text.substring (document.activeElement.selectionStart, 
                                              document.activeElement.selectionEnd);
                }
                else {
                    var selRange = window.getSelection ();
                    selText = selRange.toString ();
                }
            }
            else {
                if (document.selection.createRange) { // Internet Explorer
                    var range = document.selection.createRange ();
                    selText = range.text;
                }
            }
            if (selText !== "") {
                alert (selText);
            }
        }
    </script>
</head>
<body onmouseup="GetSelectedText ()">
    Some text for selection.
    <br /><br />
    <textarea>Some text in a textarea element.</textarea>
    <input type="text" value="Some text in an input field." size="40"/>
    <br /><br />
    Select some content on this page!
</body>