JS Range 對象的使用

---

---

一：什麼是Range對象

Range是指html文檔中的區域，如用戶用鼠標拖動選中的區域，以下圖：

經過Range對象，能夠獲取用戶選中的區域，或者指定選中區域，獲得Range的起點和終點、修改或者複製裏邊的文本，甚至是html。在富文本編輯器開發中，常常會使用到這些功能。

二：獲取當前的選區

因爲兼容性的問題,須要區分ie瀏覽器，

var selection, range;
if (window.getSelection) { 
    //現代瀏覽器
    selection = window.getSelection();
} else if (document.selection) { 
    //IE
    selection = document.selection.createRange();
}

//Range對象
range = selection.getRangeAt(0);

三：range屬性

> collapsed     若是範圍的開始點和結束點在文檔的同一位置，則爲 true，即範圍是空的，或摺疊的。
> commonAncestorContainer     範圍的開始點和結束點的（即它們的祖先節點）、嵌套最深的 Document 節點。
> endContainer         包含範圍的結束點的 Document 節點。 
> endOffset     endContainer 中的結束點位置。
> startContainer     包含範圍的開始點的 Document 節點。
> startOffset    startContainer中的開始點位置。

四：range操做

//選中區域的文字
var text = range.toString();

//選中區域的Element元素
var elem = range.commonAncestorContainer;
if(elem.nodeType != 1){
     elem = elem.parentNode;
}

//選中區域的html
var span = document.createElement('SPAN');
span.appendChild(range.cloneContents());

//選區是否爲空
var isSelectionEmpty = false;
if (range.startContainer === range.endContainer) {
   if (range.startOffset === range.endOffset) {
       isSelectionEmpty = true;
   }
}