TextRange对象参考3

时间 2019-12-05

标签 textrange 对象参考繁體版

原文原文链接

方法

collapse方法

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

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

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

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

语法

object.collapse ([toStart]);this

你能够在后面的Supported by object章节中找到关联的对象。code

参数orm

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

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

返回值

这个方法没有返回值。ip

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>