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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。