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

You are here: Reference > JavaScript > client-side > selection and ranges > objects > selection

selection object

Browser support:


		10.5

Represents the currently selected part of the document.

Note: the support for the selection object has been removed in Opera 10.5.

Basically, only the text content of the current selection is available, although in Internet Explorer, control elements in editable regions (see the contentEditable and designMode properties) can also be selected. To get the type of the selection, use the type property.

The selection object provides two methods to access the contents of the current selection, the createRange and createRangeCollection methods. The type of the objects returned by those methods depends on the type of the current selection. If the value of the type property is 'Control', both the createRange and createRangeCollection methods return a controlRange collection representing the contents of the current selection. In other cases, the createRange method returns a TextRange object and the createRangeCollection method returns a TextRanges collection. For further details, please see the pages for the mentioned range objects.

In Firefox, Opera, Google Chrome, Safari and optionally in Internet Explorer from version 9, use the window.getSelection method to retrieve the selected content.

Syntax:

Properties that reference the object:

•	document.selection

Possible members:

Properties:

type

Returns a string value that identifies the content type of the current selection.

Methods:

clear

Removes the contents of the current selection from the document.

createRange

Creates a TextRange or controlRange object depending on the type of the selection.

createRangeCollection

Creates a TextRanges or controlRange collection depending on the type of the selection.

empty

Cancels the current selection.

Example HTML code 1:

This example illustrates a cross-browser solution to get the selected content:

<head>
    <script type="text/javascript">
        function TestSelection () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selectionRange = window.getSelection ();                                        
                alert ("The text content of the selection:\n" + selectionRange.toString ());
            } 
            else {
                if (document.selection.type == 'None') {
                    alert ("No content is selected, or the selected content is not available!");
                }
                else {
                    var textRange = document.selection.createRange ();
                    alert ("The text content of the selection:\n" + textRange.text);
                }
            }
        }
    </script>
</head>
<body>
    Select some text or <button>element</button>, or do not select anything, before you click on the button below.
    <br /><br />
    <button onclick="TestSelection ();">Test the selection!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the selection object for controls:

<head>
    <script type="text/javascript">
        function Init () {
                // the 'multipleSelection' command throws an exception in Opera
            try {
                    // enables multiple selection in Internet Explorer
                document.execCommand("multipleSelection", false, true);
            }
            catch (e) {};
        }

        function TestSelection () {         
            if (document.selection === undefined || document.selection.type === undefined) {
                alert ("Your browser does not support this example!");
                return;
            }

            if (document.selection.type == "Control") {
                var controlRange = document.selection.createRange ();
                alert ("There are " + controlRange.length + " buttons selected.");

                for (var i = 0; i < controlRange.length; i++) {
                    var button = controlRange.item (i);
                    alert ("The label of the " + (i+1) + ". selected button: " + button.value);
                }
            }
            else {
                alert ("Please select some of the buttons or maybe the selection cannot contain controls in your browser!");
            }
        }
    </script>
</head>
<body onload="Init ();">
    Select some of the buttons in the field below and click on the 'Test Selection' button.<br />
    You can select a button by clicking on it.<br />
    Hold down the CTRL or SHIFT key for multiple selection.
    <br /><br />
    <div contenteditable="true" style="background-color:#a0e0e0;">
        <button>First button</button><br />
        <button>Second button</button><br />
        <button>Third button</button>
    </div>
    <br /><br />
    <button onclick="TestSelection ();">Test selection</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to get the selected text in a textarea element:

<head>
    <script type="text/javascript">
        function GetSelection () {
            var selection = "";

            var textarea = document.getElementById("myArea");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    selection = textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd);
                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    selection = textRange.text;

                }
            }

            if (selection == "") {
                alert ("No text is selected.");
            }
            else {
                alert ("The current selection is: " + selection);
            }
        }
    </script>
</head>
<body>
    <textarea id="myArea" spellcheck="false">Select some text within this field.</textarea>
    <button onclick="GetSelection ()">Get the current selection</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to modify the selected text in a textarea element:

<head>
    <script type="text/javascript">
        function ModifySelection () {
            var textarea = document.getElementById("myArea");
            if ('selectionStart' in textarea) {
                    // check whether some text is selected in the textarea
                if (textarea.selectionStart != textarea.selectionEnd) {
                    var newText = textarea.value.substring (0, textarea.selectionStart) + 
                        "[start]" + textarea.value.substring  (textarea.selectionStart, textarea.selectionEnd) + "[end]" +
                        textarea.value.substring (textarea.selectionEnd);
                    textarea.value = newText;
                }
            }
            else {  // Internet Explorer before version 9
                    // create a range from the current selection
                var textRange = document.selection.createRange ();
                    // check whether the selection is within the textarea
                var rangeParent = textRange.parentElement ();
                if (rangeParent === textarea) {
                    textRange.text = "[start]" + textRange.text + "[end]";
                }
            }
        }
    </script>
</head>
<body>
    <textarea id="myArea" cols="30" spellcheck="false">Select some text within this field.</textarea>
    <button onclick="ModifySelection ()">Modify the current selection</button>
</body>