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

You are here: Reference > JavaScript > client-side > selection and ranges > properties > rangeCount (selectionRange)

rangeCount property (selectionRange)

Browser support:

9

Returns the number of Range objects that belong to the current selection.

Note: The selectionRange object and its rangeCount property are supported in Internet Explorer from version 9.

The selectionRange object represents the current selection and every Range object that belongs to the selectionRange object represents a contiguous part of the selection.

In Internet Explorer, Opera, Google Chrome, Safari and Firefox before version 3, at most one Range can belong to the selectionRange object, because text selection is always a contiguous part of the DOM hierarchy.
In Firefox from version 3, multiple areas of text can be selected by holding down the CTRL key while selecting.

You can add ranges to the current selection with the addRange method, and remove them with the removeRange and removeAllRanges methods. To retrieve the Range objects that represent the current selection, use the getRangeAt method.
Since only Firefox supports more than one range for the selection, in other browsers, the addRange method does not add new ranges to the selection if it already contains one.

Syntax:

object.rangeCount;

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

This property is read-only.

Possible values:

Integer that represents the number of Range objects that belong to the current selection.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the rangeCount property. It can store and select multiple areas of text in Firefox. Google Chrome, Safari, Opera and Internet Explorer only support simple text selection. This example does not work in Internet Explorer before version 9. For a cross-browser solution, see the next example.

<head>
    <script type="text/javascript">
        var storedSelections = [];

        function StoreSelection () {
            if (window.getSelection) {
                var currSelection = window.getSelection ();
                for (var i = 0; i < currSelection.rangeCount; i++) {
                    storedSelections.push (currSelection.getRangeAt (i));
                }
                currSelection.removeAllRanges ();
            } else {
                alert ("Your browser does not support this example!");
            }
        }

        function ClearStoredSelections () {
            storedSelections.splice (0, storedSelections.length);
        }

        function ShowStoredSelections () {
            if (window.getSelection) {
                var currSelection = window.getSelection ();
                currSelection.removeAllRanges ();
                for (var i = 0; i < storedSelections.length; i++) {
                    currSelection.addRange (storedSelections[i]);
                }
            } else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Select some content on this page and use the buttons below.<br /><br />
    <button onclick="StoreSelection ();">Store the selection</button>
    <button onclick="ClearStoredSelections ();">Clear stored selections</button>
    <button onclick="ShowStoredSelections ();">Show stored selections</button>
    <br /><br />
    <div>Some text for selection</div>
    <div><b>Some bold text for selection.</b></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to store and restore the selection in all commonly used browsers:

<head>
    <script type="text/javascript">
        var storedSelections = [];
        var rangeObj;

        function SaveSelection (idx) {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                if (selection.rangeCount > 0) {
                    storedSelections[idx] = selection.getRangeAt (0);
                }
            }
            else {
                if (document.selection) {   // Internet Explorer
                    var range = document.selection.createRange ();
                    storedSelections[idx] = range.getBookmark ();
                }
            }
        }


        function RestoreSelection (idx) {
            if (window.getSelection) {  // all browsers, except IE before version 9
                window.getSelection ().removeAllRanges ();
                window.getSelection ().addRange (storedSelections[idx]);
            }
            else {
                if (document.body.createTextRange) {    // Internet Explorer
                    rangeObj = document.body.createTextRange ();
                    rangeObj.moveToBookmark (storedSelections[idx]);
                    rangeObj.select ();
                }
            }
        }
    </script>
</head>
<body>
    Select any text on this page and then click here:
    <button onclick="SaveSelection (0)">Save bookmark 1!</button>
    <br /><br />
    Now, select another text on this page and then click here: 
    <button onclick="SaveSelection (1)">Save bookmark 2!</button>
    <br /><br />
    With the following buttons, the saved selections can be restored:
    <br />
    <button onclick="RestoreSelection (0)">Restore bookmark 1!</button>
    <button onclick="RestoreSelection (1)">Restore bookmark 2!</button>
</body>