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

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

createRange method (selection)

Browser support:


		10.5

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

Note: the support for the selection object and its createRange method has been removed in Opera 10.5.

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', the createRange method returns a controlRange collection, else it returns a TextRange object.

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

Syntax:

object.createRange ( );

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

Return value:

Returns the newly created TextRange or controlRange object.

Example HTML code 1:

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

<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 creates a controlRange collection with the createRange 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.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>