JS Range使用整理

時間 2019-11-06

原文原文鏈接

1.獲取用戶網頁選中內容javascript

<p>4月13日消息，據臺灣媒體報道，32歲的孫燕姿(Sng Ee Tze)和後天將滿34歲的荷蘭籍印度尼西亞男朋友納迪姆(Nadim Van Der Ros)交往5年，曾說過"有空就結婚"的她，果真趁着宣傳期尾聲，於3月31日在新加坡登記註冊了！昨消息傳開，她未否定，僅說會選擇適當時間公佈喜訊，所屬"美妙音樂"則表示她個性低調，婚禮只會邀請雙方親友，也不會透露細節，但據新加坡可靠消息指出，婚宴訂在5月初。</p>
<button id="button">選中一些文字，而後點擊本按鈕</button>
JS代碼：
<script>

    //獲取網頁中選中內容
    var oBtn = document.getElementById("button"); oBtn.onclick = function () {
        var userSelection, text;
        if (window.getSelection) { //現代瀏覽器
            userSelection = window.getSelection();
        } else if (document.selection) { //IE瀏覽器 考慮到Opera，應該放在後面 
            userSelection = document.selection.createRange();

        } if (!(text = userSelection.text)) {
            text = userSelection;
        }
        alert(text);
    };
</script>

一：Range對象的概念

Range對象表明頁面上一段連續的區域，經過Range對象能夠獲取或者修改頁面上任何區域的內容。也能夠經過Range的方法進行復制和移動頁面任何區域的元素。
在Js的document文檔中有一個方法用來建立一個Range對象，代碼以下：html

var range = document.createRange();

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

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

每個selection對象都有一個或者多個Range對象，每個range對象表明用戶鼠標所選取範圍內的一段連續區域，在firefox中，能夠經過ctrl鍵能夠選取多個連續的區域，所以在firefox中一個selection對象有多個range對象，在其餘瀏覽器中，用戶只能選取一段連續的區域，所以只有一個range對象。
能夠經過selection對象的getRangeAt方法來獲取selection對象的某個Range對象，以下：
getRangeAt方法有一個參數index，表明該Range對象的序列號；咱們能夠經過Selection對象的rangeCount參數的值判斷用戶是否選取了內容；
1.當用戶沒有按下鼠標時候，該參數的值爲0.
2.當用戶按下鼠標的時候，該參數值爲1.
3.當用戶使用鼠標同時按住ctrl鍵時選取了一個或者多個區域時候，該參數值表明用戶選取區域的數量。
4.當用戶取消區域的選取時，該屬性值爲1，表明頁面上存在一個空的Range對象；
測試代碼以下：java

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meter</title> </head> <body> <script> function rangeTest() { var html, showRangeDiv = document.getElementById("showRange"), 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> <h3>selection對象與range對象的使用實例</h3> <input type="button" value="點擊我" onclick="rangeTest()"/> <div id="showRange"></div> </body> </html>

效果：node

range_selection.png

二：Range對象的屬性和方法

(1)屬性

startContainer
包含「起點」的節點。「包含」的意思是起點所屬的節點。
endContainer
包含「結束點」的節點
startOffset
「起點」在startContainer中的偏移量。
若是startContainer是文本節點、註釋節點或CDATA節點，則返回「起點」在startContainer中字符偏移量。
若是startContainer是元素節點，則返回「起點」在startContainer.childNodes中的次序。瀏覽器

<p id="p1"><span>span</span><b id="b1">Hello</b> World</p> <script type="text/javascript"> var oP1 = document.getElementById('p1') ; var oB1 = document.getElementById('b1'); var oRange = document.createRange(); oRange.setStart(oB1.firstChild, 2); // 設置range的「起點」 oRange.setEnd(oP1.lastChild, 3); // 設置range的「結束點」 alert(oRange.startOffset); // 2，可看到「起點」在<b id="b1">Hello</b>應是第三個字符。 alert(oRange.startContainer); // 元素oB1.firstChild，文本節點</script>

collapsed:
起點和結束點在一塊兒時爲true；Range對象爲空（剛createRange()時）也爲true。
commonAncestorContainer
第一個包含Range的節點，同時包含起點和結束點。app

(2)定位（設置「起點」和「結束點」）的一些方法

setStart(node, offset)和setEnd(node, offset)
setStart：設置起點的位置，node是對startContainer的引用，偏移則是startOffset；
setEnd：設置結束點的位置，node是對endContainer的引用，偏移則是startOffset；
代碼以下：wordpress

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>range3</title> <script> function deleteChar() { var div = document.getElementById("myDiv"); var textNode = div.firstChild; var rangeObj = document.createRange(); rangeObj.setStart(textNode,1); rangeObj.setEnd(textNode,4); rangeObj.deleteContents(); } </script> </head> <body> <div id="myDiv" style="color:red">這段文字是用來刪除的</div> <button onclick="deleteChar()">刪除文字</button> </body> </html>

setStartBefore(referenceNode)、setStartAfter(referenceNode)
setEndBefore(referenceNode)、setEndAfter(referenceNode)
setStartBefore：將「起點」設置到referenceNode前
setStartAfter：將「起點」設置到referenceNode後
setEndBefore：將「結束點」設置到referenceNode前
setEndAfter：將「結束點」設置到referenceNode後
注意：使用這四個方法設置的「起點」或「結束點」的父節點與referenceNode的父節點是同一個元素。
代碼以下:函數

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="application/javascript"> function delrow(){ var table=document.getElementById("mytable"); if(table.rows.length>0){ var row=table.rows[0]; var rangeObj=document.createRange(); rangeObj.setStartBefore(row); rangeObj.setEndAfter(row); rangeObj.deleteContents(); } } </script> </head> <body> <table id="mytable" border="1"> <tr> <td>內容1</td> <td>內容2</td> </tr> <tr> <td>內容3</td> <td>內容4</td> </tr> </table> <button onclick="delrow()">刪除第一行</button> </body> </html>

selectNode(referenceNode)和selectNodeContents(referenceNode)
selectNode：設置Range的範圍，包括referenceNode和它的全部後代(子孫)節點。
selectNodeContents：設置Range的範圍，包括它的全部後代節點。
兩者的區別：
測試

range_selection.png

(3)修改範圍的方法

cloneRange()
cloneRange()方法將返回一個當前Range的副本，它也是Range對象。
注意它和cloneContents()的區別在於返回值不一樣，一個是HTML片斷，一個是Range對象。代碼以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meter</title> </head> <body> <p id="p">這裏是隨便書寫的內容</p> <button onclick="cloneRange()">克隆</button> </body> <script> function cloneRange() { var rangeObj = document.createRange(); rangeObj.selectNodeContents(document.getElementById("p")); var rangeClone = rangeObj.cloneRange(); alert(rangeClone.toString()); } </script> </html>

cloneContents()
能夠克隆選中Range的fragment並返回改fragment。這個方法相似extractContents()，但不是刪除，而是克隆。代碼以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meter</title> </head> <body> <p id="p">這裏是隨便書寫的內容</p> <button onclick="cloneContents()">克隆</button> </body> <script> function cloneContents() { var rangeObj = document.createRange(); rangeObj.selectNodeContents(document.getElementById("p")); var rangeClone = rangeObj.cloneContents(); alert(rangeClone.toString()); } </script> </html>

deleteContents()
從Dom中刪除Range選中的fragment。注意該函數沒有返回值（實際上爲undefined）。
代碼以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meter</title> </head> <body> <p id="p">這裏是隨便書寫的內容</p> <button onclick="delRange()">刪除</button> </body> <script> function delRange() { var rangeObj = document.createRange(); rangeObj.selectNodeContents(document.getElementById("p")); var rangeClone = rangeObj.deleteContents(); } </script> </html>

extractContents()
將選中的Range從DOM樹中移到一個fragment中，並返回此fragment。代碼以下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meter</title> </head> <body> <div id="srcDiv" style="background-color:aquamarine;width:300px;height:50px;">你好嗎？</div> <div id="distDiv" style="background-color:bisque;width:300px;height:50px"></div> <button onclick="moveContent()">移動元素</button> </body> <script> function moveContent() { var srcDiv = document.getElementById("srcDiv"); var distDiv = document.getElementById("distDiv"); var rangeObj = document.createRange(); rangeObj.selectNodeContents(srcDiv); var docFrangMent = rangeObj.extractContents(); distDiv.appendChild(docFrangMent); } </script> </html>

insertNode
insertNode方法能夠插入一個節點到Range中，注意會插入到Range的「起點」。代碼以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>meter</title> </head> <body> <p id="p1"><b>Hello</b> World</p> </body> <script> var oP1 = document.getElementById("p1"); var oHello = oP1.firstChild.firstChild; var oWorld = oP1.lastChild; var oRange = document.createRange(); var oSpan = document.createElement("span"); oSpan.appendChild(document.createTextNode("Inserted text")); oRange.setStart(oHello, 2); oRange.setEnd(oWorld, 3); oRange.insertNode(oSpan); </script> </html>

compareBoundaryPoints()

var compare = comparerange.compareBoundaryPoints(how, sourceRange);

compare：返回1, 0, -1.（0爲相等，1爲時，comparerange在sourceRange以後，-1爲comparerange在sourceRange以前）。
how：比較哪些邊界點，爲常數。
Range.START_TO_START - 比較兩個 Range 節點的開始點
Range.END_TO_END - 比較兩個 Range 節點的結束點
Range.START_TO_END - 用 sourceRange 的開始點與當前範圍的結束點比較
Range.END_TO_START - 用 sourceRange 的結束點與當前範圍的開始點比較
sourceRange：個Range對象的邊界。
detach()
雖然GC（垃圾收集器）會將其收集，但用detach()釋放range對象是一個好習慣。語法爲：oRange.detach();
toString()
返回該範圍表示的文檔區域的純文本內容，不包含任何標籤;