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

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

comparePoint method (Range)

Browser support:

Returns an integer that represents whether the specified point is before, inside or after the current Range object.

This method is similar to the compareBoundaryPoints method, but it compares a point with a Range object, not the boundary points of two Range objects.
Since the compareBoundaryPoints method is supported in Internet Explorer from version 9, use that instead of the comparePoint method. See the examples below for details.

Syntax:

object.comparePoint (nodeToCompare, offsetInsideNode);

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

Parameters:

nodeToCompare

Required. Refers to the deepest node in the DOM hierarchy that contains the point to compare.

offsetInsideNode

Required. Integer that specifies the position of the point relative to the nodeToCompare element.

If the nodeToCompare element can have child nodes, then the offsetInsideNode parameter specifies the position of a child node in the childNodes collection of the nodeToCompare element, else it specifies a character position in the text content of the nodeToCompare element.

Return value:

Integer that retrieves the placement of the specified point relative to the current Range object in the DOM hierarchy.

One of the following values:

-1	The specified point is before the start of the Range.
0	The specified point is inside the Range.
1	The specified point is after the end of the Range.

Example HTML code 1:

This example illustrates the use of the comparePoint method:

<head>
    <script type="text/javascript">
        function TestCaret () {
            var secondSen = document.getElementById ("secondSen");

            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                
                var secondSenRange = document.createRange ();
                    // select the contents of the text node inside the bold tag
                    // it is the smallest range that contains the entire text 
                secondSenRange.selectNodeContents (secondSen.firstChild);
                
                if (secondSenRange.comparePoint) {
                    var placement = secondSenRange.comparePoint (selection.focusNode, selection.focusOffset);
                    switch (placement) {
                    case -1:
                        alert ("The caret is before the second sentence.");
                        break;
                    case 0:
                        alert ("The caret is inside the second sentence.");
                        break;
                    case 1:
                        alert ("The caret is after the second sentence.");
                        break;
                    };
                }
                else {  // Internet Explorer from version 9
                    alert ("Your browser does not support this example!");
                }
            }
            else {  // Internet Explorer before version 9
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Click inside the following field:<br />
    <div contenteditable="true" onmouseup="TestCaret ()" style="background-color:#d0e0c0">
        First sentence.<br />
        <span id="secondSen">Second sentence.</span><br />
        Third sentence.
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it also works in Internet Explorer from version 9:

<head>
    <script type="text/javascript">
        function TestCaret () {
            var secondSen = document.getElementById ("secondSen");

            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                var selRange = selection.getRangeAt (0);

                    // returns whether the direction of the selection is left-to-right
                var selLtR = (selRange.endContainer == selection.focusNode && selRange.endOffset == selection.focusOffset);
                
                var secondSenRange = document.createRange ();
                    // select the contents of the text node inside the bold tag
                    // it is the smallest range that contains the entire text 
                secondSenRange.selectNodeContents (secondSen.firstChild);
                
                    // compares the caret position to the start position of the second sentence
                var relStart = selRange.compareBoundaryPoints (selLtR ? Range.START_TO_END : Range.START_TO_START, secondSenRange);
                    // compares the caret position to the end position of the second sentence
                var relEnd = selRange.compareBoundaryPoints (selLtR ? Range.END_TO_END : Range.END_TO_START, secondSenRange);

                if (relStart < 0) {
                    alert ("The caret is before the second sentence.");
                }
                else {
                    if (relEnd > 0) {
                        alert ("The caret is after the second sentence.");
                    }
                    else {
                        alert ("The caret is inside the second sentence.");
                    }
                }
            }
            else {      // Internet Explorer before version 9
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    Click inside the following field:<br />
    <div contenteditable="true" onmouseup="TestCaret ()" style="background-color:#d0e0c0">
        First sentence.<br />
        <span id="secondSen">Second sentence.</span><br />
        Third sentence.
    </div>
</body>