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

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

extend method (selectionRange)

Browser support:

Moves the focus point of the current selectionRange object to the specified point.

The selectionRange object represents the current selection. The focus point is the point where the process of selecting was ended and it can be retrieved with the focusNode and focusOffset properties.
Although Internet Explorer supports the selectionRange object from version 9, but it does not support the extend method. Fortunately, the functionality of the extend method can be implemented with the help of the setStart and setEnd methods. See the examples below for details.

In older Internet Explorer versions (and optionally in newer ones as well), use the expand method of the TextRange object instead.

Syntax:

object.extend (focusNode, focusOffset);

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

Parameters:

focusNode

Required. Refers to the deepest node in the DOM hierarchy that contains the new position of the focus point. Sets the focusNode property to the referred node.

focusOffset

Required. Integer that specifies the new position of the focus point relative to the focusNode element.

If the focusNode element can have child nodes, then the focusOffset parameter specifies the position of a child node in the childNodes collection of the focusNode element, else it specifies a character position in the text content of the focusNode element. This parameter sets the focusOffset property to the specified position.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the extend method:

<head>
    <script type="text/javascript">
        function ExtendToSentence () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();

                if (!selection.isCollapsed) {
                    if (selection.extend) {
                            // if the selection end point is within a sentence
                        if (selection.focusNode.nodeType == Node.TEXT_NODE) {
                            var selRange = selection.getRangeAt (0);
                                // if the focus node precedes the anchor node
                            if (selRange.startContainer == selection.focusNode && selRange.startOffset == selection.focusOffset) {
                                selection.extend (selection.focusNode, 0);
                            }
                                // if the anchor node precedes the focus node
                            else {
                                selection.extend (selection.focusNode, selection.focusNode.textContent.length);
                            }
                        }
                    }
                    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>
    <div onmouseup="ExtendToSentence ()" contenteditable="true" style="width:400px; background-color:#e0f0d0;">
        <div>Select some text with your mouse within this field.</div>
        <div>When the left button is released, the end point of the selection will be extended to sentence boundary.</div>
    </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 9:

<head>
    <script type="text/javascript">
        function ExtendToSentence () {
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();

                if (!selection.isCollapsed) {
                        // if the selection end point is within a sentence
                    if (selection.focusNode.nodeType == Node.TEXT_NODE) {
                        var selRange = selection.getRangeAt (0);
                            // if the focus node precedes the anchor node
                        if (selRange.startContainer == selection.focusNode && selRange.startOffset == selection.focusOffset) {
                            selRange.setStart (selection.focusNode, 0);
                        }
                            // if the anchor node precedes the focus node
                        else {
                            selRange.setEnd (selection.focusNode, selection.focusNode.textContent.length);
                        }

                        selection.removeAllRanges ();
                        selection.addRange (selRange);
                    }
                }
            }
            else {  // Internet Explorer before version 9
                alert ("Your browser does not support this example");
            }
        }
    </script>
</head>
<body>
    <div onmouseup="ExtendToSentence ()" contenteditable="true" style="width:400px; background-color:#e0f0d0;">
        <div>Select some text with your mouse within this field.</div>
        <div>When the left button is released, the end point of the selection will be extended to sentence boundary.</div>
    </div>
</body>