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

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

inRange method (TextRange)

Browser support:

Returns whether the current TextRange object contains the specified TextRange object.

You can also use the compareEndPoints and isEqual methods to compare the placement of two TextRange objects in Internet Explorer.

In other browsers, use the compareBoundaryPoints method to compare the placement of two Range objects.

Syntax:

object.inRange (rangeToCompare);

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

Parameters:

rangeToCompare

Required. Reference to a TextRange object to compare.

Return value:

Boolean. One of the following values:

false	The current TextRange does not contain the specified TextRange object.
true	The current TextRange contains or equal to the specified TextRange object.

Example HTML code 1:

This example illustrates the use of the inRange method. If the current selection is the text content of an element and a range is aligned to the text content of the element and another range is created from the current selection, then the inRange method returns false. Conclusion: use the compareEndPoints method for TextRange comparison.

<head>
    <script type="text/javascript">
        function TestPlacement (useBugFix) {
            var boldText = document.getElementById ("boldText");

            if (document.body.createTextRange) {            // Internet Explorer
                var boldRange = document.body.createTextRange ();
                boldRange.moveToElementText (boldText);

                var selRange = document.selection.createRange ();
                if (useBugFix) {
                    if (selRange.compareEndPoints ("StartToStart", boldRange) == 0) {
                        selRange.setEndPoint ("StartToStart", boldRange);
                    }
                }
                var selContainsBold = selRange.inRange (boldRange);
                var boldContainsSel = boldRange.inRange (selRange);
                if (selContainsBold) {
                    if (boldContainsSel) {
                        alert ("The selected text and the bold text are the same.");
                    }
                    else {
                        alert ("The selection contains the bold text.");
                    }
                }
                else {
                    if (boldContainsSel) {
                        alert ("The selection is inside the bold text.");
                    }
                    else {
                        alert ("The selection does not contain and is not inside the bold text.");
                    }
                }
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Select some text on this page and use the following button to get information about 
    the placement of the <b id="boldText">bold text</b> relative to the selection.<br />
    Try to select the bold text with or without the following space character!
    <br /><br />
    <button onclick="TestPlacement (false);">Test placement</button>
    <button onclick="TestPlacement (true);">Test placement with bug fix</button>
</body>