TextRange对象参考3

方法

collapse方法

把一个range对象的开始点移动到它的结束点，或者相反。

注意：只有Internet Explorer 9.0以上的版本中支持Range对象以及它的collapse方法。

如果一个Range对象的开始点和结束点在是一位置，这个Range对象是空的。

对于Range对象，使用startContainer、startOffset、endContainer以及endOffset属性可以取得边界点以及collapsed属性，以检测一个range是否是收缩的。
对于TextRange对象，使用getClientRects方法可以取得准确的开关，并用text属性返回文本，检测文本的长度，以侦查一个range是否是收缩的。

语法

object.collapse ([toStart]);

你可以在后面的Supported by object章节中找到关联的对象。

参数

toStart：可选参数。布尔值，指明收缩的方向。为下列值之一：

false（默认值）表示把开始点移到结束点。
true表示把结束点移到开始点。

返回值

这个方法没有返回值。

compareEndPoints方法

比较两个textRange对象的开始点和结束点的位置。

如果你只需要检测两个TextRange对象是否完全相同，可以用isEqual方法。要想得到一个TextRange对象的准确外形，可以使用getClientRects方法。

compareBoundaryPoints方法提供的功能类似于别的浏览器中的compareEndPoints方法。

语法

object.compareEndPoints (type,rangeToCompare);

你可以在后面的Supported by object章节中找到关联的对象。

参数

type：必不可少的参数。字符串，指定用于比较的边界点。为下列值之一：

EndToEnd：比较当前TextRange的结束点与rangeToCompare的结束点。
EndToStart：比较当前TextRange的结束点与rangeToCompare的开始点。
startToEnd：比较当前TextRange的开始点与rangeToCompare的结束点。
startToStart：比较当前TextRange的开始点与rangeToCompare的开始点。

返回值

整型数，取得DOM层次结构中，两个点的定位。为下列值之一：

-1：第一个点在第二个点的前面。
0：两个边界点在相同的位置处。
1：第一个点在第二个点的后面。

示例代码1

下面这个示例代码演示了collapse方法的用法：

HTML<head>
    <script type="text/javascript">
        function MoveButton () {
            var wanderer = document.getElementById ("wanderer");
            if (window.getSelection) {  // all browsers, except IE before version 9
                var selection = window.getSelection ();
                if (selection.rangeCount > 0) {
                    var range = selection.getRangeAt (0);
                    range.collapse (false);
                    range.insertNode (wanderer);
                }
            }
            else {  // Internet Explorer before version 9
                var textRange = document.selection.createRange ();
                textRange.collapse (false);
                textRange.pasteHTML (wanderer.outerHTML);
                wanderer.parentNode.removeChild (wanderer);
            }
        }
    </script>
</head>
<body>
    <div onmouseup="MoveButton ()" style="width:400px; background-color:#e0f0d0;">
        Select some text with your mouse within this field.
        When the left button is released the wanderer button is placed 
        at the ending of the selection.
        Left mouse clicks also move the wanderer button in Internet Explorer, Firefox, Google Chrome and Safari.
    </div>
    <button id="wanderer">wanderer</button>
</body>

代码示例2

这示例演示了compareEndPoints方法的用法。在别的浏览器中，要想得到一个近似的示例，请看compareBoundaryPoints方法的页面。

HTML<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>

TextRange对象参考3

方法

collapse方法

语法

返回值

compareEndPoints方法

语法

返回值

示例代码1

代码示例2

樊潇洁

引用和评论

又升级了自己写的在线编辑器，给它加了正则表达式查找替换功能

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具