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

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

compareEndPoints method (TextRange)

Browser support:

Compares the placement of the start or end point of the current TextRange object with the placement of the start or end point of another TextRange object.

If you only need to check whether two TextRange objects are identical, use the isEqual method. To get the exact shape of a TextRange object, use the getClientRects method.

The compareBoundaryPoints method provides functionality similar to the compareEndPoints method in other browsers.

Syntax:

object.compareEndPoints (type, rangeToCompare);

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

Parameters:

type

Required. String that specifies the boundary points to compare.

One of the following values:

EndToEnd

Compares the end point of the current TextRange with the end point of the rangeToCompare.

EndToStart

Compares the end point of the current TextRange with the start point of the rangeToCompare.

StartToEnd

Compares the start point of the current TextRange with the end point of the rangeToCompare.

StartToStart

Compares the start point of the current TextRange with the start point of the rangeToCompare.

rangeToCompare

Required. Reference to a TextRange object to compare.

Return value:

Integer that retrieves the placement of the two points in the DOM hierarchy.

One of the following values:

-1	The first point is before the second point.
0	The two boundary points are located at the same position.
1	The first point is after the second point.

Example HTML code 1:

This example illustrates the use of the compareEndPoints method. For a similar example in other browsers, see the page for the compareBoundaryPoints method.

<head>
    <script type="text/javascript">
        function TestPlacement () {
            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 (selRange.compareEndPoints ("EndToStart", boldRange) <= 0) {
                    alert ("The selection is before the bold text.");
                }
                else {
                    if (selRange.compareEndPoints ("StartToEnd", boldRange) >= 0) {
                        alert ("The selection is after the bold text.");
                    }
                    else {
                        var startPoints = selRange.compareEndPoints ("StartToStart", boldRange);
                        var endPoints = selRange.compareEndPoints ("EndToEnd", boldRange);

                        if (startPoints < 0) {
                            if (endPoints < 0) {
                                alert ("The selection is before the bold text but intersects it.");
                            }
                            else {
                                alert ("The selection contains the bold text.");
                            }
                        }
                        else {
                            if (endPoints > 0) {
                                alert ("The selection is after the bold text but intersects it.");
                            }
                            else {
                                if (startPoints == 0 && endPoints == 0) {
                                    alert ("The selected text and the bold text are the same.");
                                }
                                else {
                                    alert ("The selection is 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 /><br />
    <button onclick="TestPlacement ();">Test placement</button>
</body>