關於 Selection（getSelection ） 對象的一些常規用法集錦

最近在做到的業務場景中涉及到選中文本的操作較多，現在將一些常規用法和場景記錄下。

1. 作用及獲取

Selection 對象主要表示用戶選擇的文本范圍或者插入符號的當前位置，代表頁面的文本選區，可能跟橫跨多個元素。獲取方法如下：

this.selectOperate = window.getSelection ? window.getSelection() : window.document.getSelection();

2.常用屬性

記住2個參數：anchor指向用戶開始選擇的方法，focus指向結束選擇的地方，經常使用的有：

• anchorNode： 選擇文本開始所在的節點

• focusNode： 選擇文本結束點所在的節點

• anchorOffset： 選擇文本開始所在的節點位置

• focusOffset： 選擇文本結束所在的節點位置

3.Range對象

選中的文字可以轉換成Range對象，通過Range對象可以作一些操作，比如刪除，復制，插入，替換，或許選中的內容。
獲取Range對象

• getRangeAt(0)： 獲取當前選中的range對象

var range = this.selectOperate.getRangeAt(0);

range對象能做的事：

• range.cloneContents 克隆選中文檔片段

• range.deleteContents 刪除選中片段

其他屬性，與前面的功能差不多~

• range.startContainer 指用戶選擇內容開始處的容器節點
• range.endContainer 指用戶選擇內容結尾處的容器節點
• range.startOffset 開始容器的節點位置
• range.endOffset 結尾容器的節點位置

-range.insertNode 插入節點

    let oFragment = range.createContextualFragment('1234'); // 創建一個需要添加的range片段
    let oLastNode = oFragment.lastChild ; // 獲取text節點1234
    range.insertNode(oFragment) ; // 在range處插入
    range.setEndAfter(oLastNode ) ; // 設置光標在插入的位置
    range.setStartAfter(oLastNode ); // 設置光標在插入的位置
    select.removeAllRanges(); // 去除之前的選擇range
    select.addRange(range); // 將range設置為當前的range