Selection與Range 物件操作範例指南

2022-09-02 18:02:52

前言

有些時候我們需要能夠通過JavaScript存取頁面的當前選擇，已達成選擇（取消選擇）部分節點以從檔案中刪除所選內容或像檔案中插入某些新內容。我們需要Range和Selction物件已達成我們的目的。

Range

選擇的基本概念是Range，其本質是一對‘邊界點’：範圍起點和範圍終點

我們可以通過Range物件來操作選擇

    // 可以不傳任何引數建立Range物件
    let range = new Range()
    
    // 可以通過設定開始和結束邊界點來進行選擇
    // 指定開始點
    range.setStart(node, offset)
    // 指定最大範圍但不包括offset
    range.setEnd(node, offset)

選擇部分文字

setStart和setEnd方法的第一個引數node可以是文位元組點也可以是元素節點

當node是文位元組點時，offset則必須是其文字中的位置

<p id="p">Hello</p> 
<script> 
let range = new Range(); 
range.setStart(p.firstChild, 2); 
range.setEnd(p.firstChild, 4); 
</script>

選擇dom元素節點

當node是元素節點時，offset則必須是子元素的索引編號

當我們有如下dom結構並且以p為node節點時，對應的offset如圖所示

<p>Test: <i>test1</i> and <b>test2</b> </p>
   | 0   |   1      | 2  |     3     |

range物件屬性

我們在上面的範例中建立的 range 物件具有以下屬性：

startContainer，startOffset —— 起始節點和偏移量，

endContainer，endOffset —— 結束節點和偏移量，

collapsed —— 布林值，如果範圍在同一點上開始和結束（所以範圍內沒有內容）則為 true，

commonAncestorContainer —— 在範圍內的所有節點中最近的共同祖先節點，

編輯範圍的方法

deleteContents() —— 從檔案中刪除範圍中的內容

extractContents() —— 從檔案中刪除範圍中的內容，並將刪除的內容作為 DocumentFragment 返回

cloneContents() —— 複製範圍中的內容，並將複製的內容作為 DocumentFragment 返回

insertNode(node) —— 在範圍的起始處將 node 插入檔案

surroundContents(node) —— 使用 node 將所選範圍中的內容包裹起來。要使此操作有效，則該範圍必須包含其中所有元素的開始和結束標籤：不能像 <i>abc 這樣的部分範圍。

更多API

更多API及詳細引數見 MDN Range

Selection

Range是用來管理選擇範圍的通用物件，但是新建一個Range物件並不一定會在檔案上建立一個選擇。 Selection物件是用來獲取檔案選擇的。可以通過winodw.getSelection()或document.getSelection()來獲取。一個選擇可以包括零個或多個範圍，但實際上除firefox允許同時選擇多個範圍，其他瀏覽器最多隻能選擇一個範圍。