HTML5編輯API之Range對象

時間 2019-11-10

標籤 html5 html 編輯 api range 對象欄目 HTML5 简体版

原文原文鏈接

Range對象表明頁面上的一段連續區域，經過Range對象，能夠獲取或修改頁面上的任何區域，能夠經過以下建立一個空的Range對象，以下：html

var range = document.createRange();前端

在html5中，每個瀏覽器窗口及每個窗口中都有一個selection對象，表明用戶鼠標在頁面中所選取的區域，(注意：通過測試IE9如下的瀏覽器不支持Selection對象), 能夠經過以下語句建立selection對象；html5

var selection = document.getSelection(); 或者node

var selection = window.getSelection();web

每個selection對象都有一個或者多個Range對象，每個range對象表明用戶鼠標所選取範圍內的一段連續區域，在firefox中，能夠經過ctrl鍵能夠選取多個連續的區域，所以在firefox中一個selection對象有多個range對象，在其餘瀏覽器中，用戶只能選取一段連續的區域，所以只有一個range對象。瀏覽器

能夠經過selection對象的getRangeAt方法來獲取selection對象的某個Range對象，以下：app

var range = document.getSelection().getRangeAt(index);性能

　getRangeAt方法有一個參數index，表明該Range對象的序列號；咱們能夠經過Selection對象的rangeCount參數的值判斷用戶是否選取了內容；測試

當用戶沒有按下鼠標時候，該參數的值爲0.
當用戶按下鼠標的時候，該參數值爲1.
當用戶使用鼠標同時按住ctrl鍵時選取了一個或者多個區域時候，該參數值表明用戶選取區域的數量。
當用戶取消區域的選取時，該屬性值爲1，表明頁面上存在一個空的Range對象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>range</title>
</head>
<body>
    <script>
        function rangeTest() {
            var html;
              var  showRangeDiv=document.getElementById("showRange");
             var  selection=document.getSelection();
            if(selection.rangeCount>0){
                html="您選取了"+selection.rangeCount+">段內容<br/>"
                for(var i=0;i<selection.rangeCount;i++){
                    var range=selection.getRangeAt(i);
                    html+="第"+(i+1)+"段內容爲："+ range+"<br/>";
                }
                showRangeDiv.innerHTML=html;
            }
        }
    </script>
    Selection與Range對象的使用
    <input type="button" value="點擊我" onclick="rangeTest()">
    <div id="showRange"></div>
</body>
</html>

selectNode方法：Range對象的selectNode方法用於將Range對象的起點指定爲某個節點的起點，將Range對象的終點指定爲該節點的終點，使Range對象所表明的區域中包含該節點。使用方法以下：spa

rangeObj.selectNode(node);

上面的rangeObj表明一個Range對象，該方法使用一個參數，表明頁面中的一個節點。

selectNodeContents方法：用於將Range對象的起點指定爲某個節點中的全部內容的起點，將Range對象的終點指定爲該節點全部內容的終點，使Range對象所表明的區域中包含該節點的全部內容。使用方法以下：

rangeObj.selectNodeContents(node);

含義如上所示;

deleteContents方法：用於將Range對象中所包含的內容從頁面中刪除，使用方法以下所示：

rangeObj.deleteContents();

    <script>
        function deleteRangeContent (onlyContent) {
            var div=document.getElementById("div");
            var rangeObj=document.createRange();
            if(onlyContent){
                rangeObj.selectNodeContents(div);
                rangeObj.deleteContents();
            }else{
                rangeObj.selectNode(div);
                rangeObj.deleteContents();
            }
        }
    </script>
    <div id="div" style="background-color: aquamarine; width: 300px;height: 50px">
        元素中內容
    </div>
    <button onclick="deleteRangeContent (false)">刪除元素</button>
    <button onclick="deleteRangeContent (true)">刪除內容</button>

setStart方法用於將某個節點中的某處位置指定爲Range對象所表明區域的起點位置，使用方法以下：

rangeObj.setStart(node,curIndex);

如上代碼rangeObj表明一個Range對象，該setStart方法使用2個參數，第一個參數node表明一個節點，第二個參數是一個數字，當第一個參數node所表明的節點是一個內容爲一段文字的文字節點時，該參數值用於指定將第幾個文字的結束位置做爲Range對象所表明的區域的起點位置；當第一個參數node所表明的節點中包括其餘子節點時，該參數值用於將第幾個子節點的結束位置指定爲Range對象所表明的區域的起點位置；

setEnd方法用於將某個節點中的某處位置指定Range對象所表明區域的結束位置。使用方法以下所示：

rangeObj.setEnd(node,curIndex);

該方法中的2個參數的含義如setStart方法中參數的含義相同；只不過一個是起點位置，另外一個是結束位置；

setStartBefore方法：用於將某個節點的起點位置指定爲Range對象所表明區域的起點位置。

setStartAfter方法： 用於將某個節點的終點位置指定爲Range對象所表明區域的起點位置。

setEndBefore方法： 用於將某個節點的起點位置指定爲Range對象所表明區域的終點位置。

setEndAfter方法： 用於將某個節點的終點位置指定爲Range對象所表明區域的終點位置。

   <script>
        function deleteChar() {
            var div=document.getElementById("mydiv");
            var textNode=div.firstChild;
            var rangeObj=document.createRange();
            rangeObj.setStart(textNode,1);
            rangeObj.setEnd(textNode,5);
            rangeObj.deleteContents();
        }
    </script>
    <div id="mydiv" style="color: cornflowerblue">
        12345測試刪除文字功能aaaaaaaaa
    </div>
    <button onclick="deleteChar()">刪除文字</button>

cloneRange
cloneRange方法  Range對象的cloneRange方法用於對當前的Range對象進行復制，該方法返回複製的Range對象，

    <script>
        function cloneRange() {
            var rangeObj=document.createRange();
            var p=document.getElementById("p");
            rangeObj.selectNodeContents(p)
            var rangeClone=rangeObj.cloneRange();
            alert(rangeClone.toString());
        }
    </script>
    <p id="p">這裏是內容</p>
    <button onclick="cloneRange()">克隆</button>

cloneContents
 該方法用於在頁面上追加一段HTML代碼，而且將Range對象所表明區域中的HTML代碼克隆到被追加的html代碼中；

    <script>
        function cloneContent() {
            var div=document.getElementById("div1");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(div);
            var docFrangMent=rangeObj.cloneContents();
            div.appendChild(docFrangMent);
        }
    </script>
    <div id="div1">
        *小萌貨*
        <br/>
        <button onclick="cloneContent()">克隆</button>
        <br/>
    </div>

extractContents
extractContents方法 用於將Range對象所表明區域中的html代碼克隆到一個DocumentFragment對象中，而後從頁面中刪除這段HTML代碼；

    <script>
        function moveContent() {
            var srcDiv=document.getElementById("srcDiv");
            var disDiv=document.getElementById("disDiv");
            var rangeObj=document.createRange();
            rangeObj.selectNodeContents(srcDiv);
            var docFrangment=rangeObj.extractContents();
            disDiv.appendChild(docFrangment);
        }
    </script>
    <div id="srcDiv" style="background-color: cornflowerblue;width:300px;height: 50px">麼麼噠</div>
    <div id="disDiv" style="background-color: #ff6471;width:300px;height: 50px"></div>
    <button onclick="moveContent()">移動元素</button>

insertNode
insertNode方法： 該方法用於將指定的節點插入到某個Range對象所表明的區域中，插入位置爲Range對象所表明區域的起點位置，若是該節點已經存在於頁面中，該節點將被移動到Range對象表明的區域的起點處。

    <script>
        function moveButton() {
            var btn=document.getElementById("button");
            var selection=document.getSelection();
            if(selection.rangeCount>0){
                var range=selection.getRangeAt(0);
                range.insertNode(btn);
            }
        }
    </script>
    <div onmouseup="moveButton()" style="width: 400px;background-color: cornflowerblue">
        web前端 HTML5 hello world
    </div>
    <button id="button">按鈕</button>

compareBoundaryPoints

    <script>
            function b() {
                var boldText=document.getElementById("boldTest");
                var boldRange=document.createRange();
                boldRange.selectNodeContents(boldText.firstChild);
                var selection=document.getSelection();
                if(selection.rangeCount>0) {
                    var selRange = selection.getRangeAt(0);
                    if (selRange.compareBoundaryPoints(Range.START_TO_END, boldRange) <= 0) {
                        alert("選取的文字在粗體前面");

                    } else {
                        if (selRange.compareBoundaryPoints(Range.END_TO_START, boldRange) >= 0)
                            alert("選取的文字在粗體的後面");
                    }
                }
            }
    </script>
    <div>
        下雨天了怎麼辦，<b id="boldTest">忽然</b>好想你。
        <br/>
        <button onclick="b()">位置比較</button>
    </div>

collapse

    <script>
        var rangeObj=document.createRange();
        function selectRangeContens() {
            var div=document.getElementById("div");
            rangeObj.selectNode(div);
        }
        function  unselect() {
            rangeObj.collapse(false);
        }
        function showRange() {
            alert(rangeObj.toString());
        }
    </script>
    <div id="div2" style="background-color: cadetblue; width: 300px;height: 50px;">
        說好的幸福呢？
    </div>
    <button onclick="selectRangeContens()">選擇元素</button>
    <button onclick=" unselect()">取消元素</button>
    <button onclick="showRange() ">顯示Range內容</button>