TextRange对象参考3

2019年8月26日 176次阅读 来源: 樊潇洁

要领

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>
    原文作者：樊潇洁
    原文地址: https://segmentfault.com/a/1190000002896400
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞