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

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

createRangeCollection method (selection)

Browser support:

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

You can get the type of the selection with the type property of the selection object.

When the value of the type property is 'Control', then the createRangeCollection method returns an instance of the controlRange collection,
else it returns an instance of the TextRanges collection.

The TextRanges collection contains TextRange objects. Every TextRange object represents a contiguous part of the selection. Multiple selection is not supported for text content in Internet Explorer, therefore the TextRanges collection returned by the createRangeCollection method always contains exactly one TextRange object.

The selection.createRange method is similar to the createRangeCollection method. When the value of the type property is 'Control', these two methods are equivalent. In other cases, the first element of the TextRanges collection returned by the createRangeCollection method and the TextRange object returned by the createRange method are identical. Therefore, using the createRange method is simpler than the createRangeCollection method.

Use the window.getSelection method for similar functionality in Firefox, Opera, Google Chrome and Safari (and Internet Explorer from version 9).

Syntax:

object.createRangeCollection ( );

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

Return value:

Returns the newly created TextRanges or controlRange collection.

Example HTML code 1:

This example illustrates the use of the createRangeCollection method to receive the current selection as a string:

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

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example creates a controlRange collection with the createRangeCollection method from the current selection:

<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.createRangeCollection ();
                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>