JavaScript中對光標和選區的操做

時間 2021-06-22

標籤 javascript html java node 瀏覽器 app 編輯器函數 spa code 欄目 JavaScript 简体版

原文原文鏈接

在一些業務場景，好比高亮文本、輸入編輯、等場景中須要對光標和選區進行操做時，可使用瀏覽器提供的 Selection 對象和 Range 對象來操做光標和選區。javascript

Selection 對象

Selection 對象表示用戶選擇的選區或插入符號的當前位置，它可能橫跨多個元素。html

//獲取 Selection 對象
window.getSelection();

用戶可能從左到右（與文檔方向相同）選擇文本或從右到左（與文檔方向相反）選擇文本。 java

anchor （錨點）： 指向用戶開始選擇的地方。
focus （焦點）： 指向用戶結束選擇的地方。 node

若是你使用鼠標選擇文本的話，anchor 就指你按下鼠標鍵的地方，而 focus 就指你鬆開鼠標鍵的地方。anchor 和 focus 的概念不能與選區的起始位置和終止位置混淆，由於 anchor 可能在 focus 的前面，也可能在 focus 的後面，這取決於你選擇文本時鼠標移動的方向，也就是按下鼠標鍵和鬆開鼠標鍵的位置。瀏覽器

以下圖所示：app

屬性：

anchorNode： 錨點（anchor）所在節點。
anchorOffset：編輯器
- 若是 anchorNode 是文本節點、註釋節點，返回錨點（anchor）到該節點中第一個字的字符個數。
- 若是 anchorNode 是元素節點，返回錨點（anchor）以前的同級節點總數。
focusNode： 焦點（focus）所在節點。
focusOffset：函數
- 若是 focusNode 是文本節點、註釋節點，返回焦點（focus）到該節點中的第一個字的字符個數。
- 若是 focusNode 是元素節點，返回焦點（focus）以前的同級節點總數。
isCollapsed： 表示選區的起始位置和終止位置是否重合的 Boolean 值，若是爲 true，能夠認爲當前沒有內容選中。
rangeCount： 選區中包含的 Range 對象數量。
type： 描述當前選區的類型，有如下三個值：spa
- None： 當前沒有選擇。
- Caret： 僅單擊，但未選擇，選區已摺疊（即光標在字符之間，並未處於選中狀態）。
- Range： 選擇的是一個範圍。

注意：
以上全部屬性都是只讀屬性。code

方法：

addRange(range)

向選區（Selection 對象）中添加一個區域（ Range 對象）。

參數：

range：一個區域對象

示例：

<p id="text">文本</p>

//添加一個選區
var text = document.querySelector("#text");
var selObj = window.getSelection();
var rangeObj = document.createRange();
rangeObj.selectNode(text);
selObj.addRange(rangeObj);

collapse(parentNode,offset)

收起當前選區到一個點。文檔不會發生改變。

參數：

parentNode：光標落在的目標節點
offset：可選，在目標節點內的偏移量

示例：

<div contenteditable="true" id="text">文本</div>

//收起選區到一個點，光標落在一個可編輯元素上
var text = document.querySelector("#text")
window.getSelection().collapse(text,0);

collapseToEnd()
取消當前選區，並把光標定位在原選區的最末尾處。
參數：
無
示例：
```
var selObj = window.getSelection();
selObj.collapseToEnd();
```
collapseToStart()
取消當前選區，並把光標定位在原選區的最開始處。
參數：
無
示例：
```
var selObj = window.getSelection();
selObj.collapseToStart();
```
containsNode(aNode,aPartlyContained)
判斷指定的節點是否包含在 Selection 對象中（便是否被選中）。
參數：
aNode：用於判斷是否包含在 Selection 對象中的節點。
aPartlyContained：
當此參數爲 true 時，Selection 對象包含 aNode 的一部分或所有時，containsNode() 方法返回true。
當此參數爲 false （默認值）時，只有 Selection 對象徹底包含 aNode 時，containsNode() 方法才返回 true。
示例：
```
<div id="text">文本</div>
```
```
var text = document.querySelector("#text");
var selObj = window.getSelection();
var contains = selObj.containsNode(text);
```
deleteFromDocument()
從 DOM 中刪除選中的文檔片斷。
參數：
無
示例：
```
var selObj = window.getSelection();
selObj.deleteFromDocument();
```
extend(node,offset)
移動選區的焦點（focus）到指定的點。選區的錨點（anchor）不會移動。選區將從錨點（anchor）開始到新的焦點（focus），無論方向。
參數：
node：焦點（focus）會被移至此節點內。
offset：可選，默認值爲0，焦點（focus）會被移至 node 內的偏移位置。
示例：
```
<div id="text">文本</div>
```
```
var text = document.querySelector("#text");
var selObj = window.getSelection();
selObj.extend(text);
```
getRangeAt(index)
返回一個當前選區包含的 Range 對象。
參數：
index：該參數指定 Range 對象的索引。若是該數值大於或等於 rangeCount ，將會報錯。
示例：
```
//獲取一個 Selection 對象
var selObj = window.getSelection();
//獲取一個 Range 對象
var rangeObj  = selObj.getRangeAt(0);
```
modify(alter,direction,granularity)
經過文本命令來更改當前選區或光標位置。
參數：
alter：改變類型，傳入 move 來移動光標位置，或者 extend 來擴展當前選區。
direction：調整選區的方向。你能夠傳入 forward 或 backward 來根據選區內容的語言書寫方向來調整。或者使用 left 或 right 來指明一個明確的調整方向。
granularity：調整的距離顆粒度。可選值有 character、word、sentence、line、paragraph、lineboundary、sentenceboundary、paragraphboundary、documentboundary。
示例：
```
var selection = window.getSelection();
selection.modify("extend", "forward", "word");
```

removeAllRanges()
會從當前 Selection 對象中移除全部的 Range 對象，取消全部的選擇。
參數：
無
示例：
```
var selObj = window.getSelection();
selObj.removeAllRanges();
```
removeRange(range)
將一個 Range 對象從選區中移除。
參數：
range：一個將從選區中移除的 Range對象。
示例：
```
var selObj = window.getSelection();
var rangeObj = selObj.getRangeAt(0)
selObj.removeRange(rangeObj);
```

selectAllChildren(parentNode)

把指定元素的全部子元素設置爲選區（該元素自己除外），並取消以前的選區。

參數：

parentNode：指定元素

示例：

<div id="selectAll">
  <div>文本1</div>
  <div>文本2</div>
</div>

var selectAll = document.querySelector("#selectAll");
var selObj = window.getSelection();
selObj.selectAllChildren(selectAll);

setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)
選中兩個特定 DOM 節點之間的內容。
參數：
anchorNode：選中內容的開始節點
anchorOffset：選區起始位置在 anchorNode 內的偏移量。
若是 anchorNode 是文本節點，表示選區起始位置在該節點第幾個字符位置。
若是 anchorNode 是元素節點，表示選區起始位置在該節點內第幾個子節點的位置。
focusNode：選中內容的結束節點
focusOffset：選區終止位置在 focusNode 內的偏移量。
若是 focusNode 是文本節點，表示選區終止位置在該節點第幾個字符位置。
若是 focusNode 是元素節點，表示選區終止位置在該節點內第幾個子節點的位置。

示例：

<div id="start"></div>
<div id="end"></div>

var start = document.querySelector("#start");
var end = document.querySelector("#end");
var selObj = window.getSelection();
selObj.setBaseAndExtent(start,0,end,0);

toString()
返回表明當前 Selection 對象的字符串，例如當前選擇的文本。
參數：
無
示例：
```
var selObj = window.getSelection();
selObj.toString();
```

Range 對象

Range 對象表示被選中的文檔片斷。一個 Range 對象可能包含整個元素節點，也可能包含元素節點的一部分，例如文本節點的一部分文字。用戶一般只能選擇一個 Range 對象，可是有的時候用戶也有可能選擇多個 Range 對象（只有火狐瀏覽器能夠選擇多個 Range 對象）。

能夠用 Document 對象的 Document.createRange 方法建立 Range，也能夠用 Selection 對象的 getRangeAt 方法獲取 Range。另外，還能夠經過 Document 對象的構造函數 Range() 來獲得 Range。

屬性：

collapsed： 返回一個表示起始位置和終止位置是否相同的 Boolean 值。
commonAncestorContainer： 返回包含 startContainer 和 endContainer 的最深一級的節點。
endContainer： 返回包含 Range 終點位置的節點。
endOffset：
- 若是 endContainer 是文本節點、註釋節點，返回該節點第一個字到選區邊界的字符個數（即被選中的字符個數）。
- 若是 endContainer 是元素節點，返回選區終止位置以後第一個節點以前的同級節點總數。
startContainer： 返回包含 Range 開始位置的節點。
startOffset：
- 若是 startContainer 是文本節點、註釋節點，返回該節點第一個字到選區邊界的字符個數（即未被選中的字符個數）。
- 若是 startContainer 是元素節點，返回選區起始位置第一個節點以前的同級節點總數。

注意：
以上全部屬性都是只讀屬性。

方法：

cloneContents()

返回一個文檔片斷，它是 Range 對象中全部節點的副本。

參數：

無

示例：

// 在文檔中插入選中元素
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
documentFragment = rangeObj.cloneContents();
document.body.appendChild(documentFragment);

cloneRange()
返回一個 Range 對象的副本（兩個對象各自作出改變，都不會影響另外一方）。
參數：
無
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
clone = rangeObj.cloneRange();
```
collapse(toStart)
向開始或結束方向摺疊 Range 。
參數：
toStart：可選，Boolean值（默認值 false）， true 摺疊到 Range 的開始方向，false 摺疊到結束方向。
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.collapse(true);
```

compareBoundaryPoints(how, sourceRange)

比較兩個 Range 對象的起始位置節點或結束位置節點。

參數：

how 表示比較方法的常量：

Range.END_TO_END ：比較 sourceRange 對象的結束位置節點和原 Range 對象的結束位置節點。
  Range.END_TO_START ：比較 sourceRange 對象的結束位置節點和原 Range 對象的起始位置節點。
  Range.START_TO_END ：比較 sourceRange 對象的起始位置節點和原 Range 對象的結束位置節點。
  Range.START_TO_START ：比較 sourceRange 對象的起始位置節點和原 Range 對象的起始位置節點。

sourceRange：一個與原 Range 對象比較的 Range 對象。

返回值

compare 表示一個數字：

-1 ：原 Range 對象的比較節點在 sourceRange 對象的比較節點以前  
  0 ：原 Range 對象的比較節點在 sourceRange 對象的比較節點的相同位置   
  1 ：原 Range 對象的比較節點在 sourceRange 對象的比較節點以後

示例：

<div id="range">range</div>
<div id="sourceRange">sourceRange</div>

var range, sourceRange, compare;
range = document.createRange();
range.selectNode(document.querySelector("#rang"));
sourceRange = document.createRange();
sourceRange.selectNode(document.querySelector("#sourceRange"));
compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);

comparePoint(referenceNode,offset)
判斷指定節點是在 Range 對象的以前、相同仍是以後位置。
參數：
referenceNode：與 Range 對象進行比較的節點。
offset：在 referenceNode 內的偏移量。
若是 referenceNode 是文本節點、註釋節點，offset 表示在該節點中字符的偏移位置。
若是 referenceNode 是元素節點，offset 表示在該節點中子元素的偏移位置。
示例：
```
<div id="range">range</div>
<div id="referenceNode">referenceNode</div>
```
```
range = document.createRange();
range.selectNode(document.querySelector("#range"));
returnValue = range.comparePoint(document.querySelector("#referenceNode"), 0);
```

createContextualFragment(tagString)

將 HTML 字符串轉換爲文檔片斷

參數：

tagString：要轉換的 HTML 字符串。

示例：

<div id="range">range</div>

var tagString = "<div>node</div>";
var range = document.createRange();
range.selectNode(document.querySelector("#range"));
var documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

deleteContents()
從 DOM 中刪除選中的文檔片斷，不返回刪除的文檔片斷。
參數：
無
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.deleteContents();
```
extractContents()
從 DOM 中刪除選中的文檔片斷，返回刪除的文檔片斷（不保留 DOM 事件）。
參數：
無
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
rangeObj.extractContents();
```

getBoundingClientRect()

返回一個 DOMRect 對象，表示整個選區的位置信息。

參數：

無

示例：

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var boundingRect = rangeObj.getBoundingClientRect();

getClientRects()
返回一個選區內全部元素調用 Element.getClientRects() 方法所得結果的列表。表示選區在屏幕上所佔的區域。
參數：
無
示例：
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var boundingRect = rangeObj.getClientRects();
```

insertNode(newNode)

在選區開始處插入一個節點。

參數：

newNode：須要插入的節點

示例：

<div id="insertNode">insertNode</div>
<div id="node">node</div>

range = document.createRange();
newNode = document.querySelector("#node");
range.selectNode(document.querySelector("#insertNode"));
range.insertNode(newNode);

intersectsNode(referenceNode)

返回一個 Boolean 值，判斷指定節點和 Range 對象是否相交。

參數：

referenceNode：須要比較的節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.intersectsNode(referenceNode);

isPointInRange(referenceNode,offset)
返回一個 Boolean 值，判斷指定節點是否在 Range 對象內。
參數：
referenceNode：指定節點
offset：在 referenceNode 內的偏移量。
若是 referenceNode 是文本節點，offset 表示在該節點中字符的偏移位置。
若是 referenceNode 是元素節點，offset 表示在該節點中子元素的偏移位置。
示例：
```
<div id="referenceNode">referenceNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.isPointInRange(referenceNode,0);
```

selectNode(referenceNode)

將指定節點包含在 Range 對象內。

參數：

referenceNode：指定節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.selectNode(referenceNode);

selectNodeContents(referenceNode)

將指定節點的內容包含在 Range 對象內。

參數：

referenceNode：指定節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.selectNodeContents(referenceNode);

setEnd(endNode,endOffset)
設置選區的終止位置。
參數：
endNode：終止位置所在的節點
endOffset：在 endNode 內的偏移量。
若是 endNode 是文本節點、註釋節點，endOffset 表示在該節點中字符的偏移位置。
若是 endNode 是元素節點，endOffset 表示在該節點中子元素的偏移位置。
示例：
```
<div id="endNode">endNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var endNode = document.querySelector("#endNode");
rangeObj.setEnd(endNode,0)
```

setEndAfter(referenceNode)

設置選區的結束位置在指定節點以後。

參數：

referenceNode：指定節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var referenceNode = document.querySelector("#referenceNode");
rangeObj.setEndAfter(referenceNode)

setEndBefore(referenceNode)

設置選區的結束位置在指定節點以前。

參數：

referenceNode：指定節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var referenceNode = document.querySelector("#referenceNode");
rangeObj.setEndBefore(referenceNode)

setStart(startNode,startOffset)
設置選區的起始位置。
參數：
startNode：起始位置所在的節點
startOffset：在 startNode 內的偏移量。
若是 startNode 是文本節點、註釋節點，startOffset 表示在該節點中字符的偏移位置。
若是 startNode 是元素節點，startOffset 表示在該節點中子元素的偏移位置。
示例：
```
<div id="startNode">startNode</div>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
startNode = document.querySelector("#startNode");
rangeObj.setStart(startNode,0)
```

setStartAfter(referenceNode)

設置選區的起始位置在指定節點以後。

參數：

referenceNode：指定節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.setStartAfter(referenceNode)

setStartBefore(referenceNode)

設置選區的起始位置在指定節點以前。

參數：

referenceNode：指定節點

示例：

<div id="referenceNode">referenceNode</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
referenceNode = document.querySelector("#referenceNode");
rangeObj.setStartBefore(referenceNode)

surroundContents(newParent)

把指定節點插入選區的起始位置，而後把指定節點的內容替換爲選區的內容。

參數：

newParent：指定節點

示例：

<div id="newParent">newParent</div>

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
newParent = document.querySelector("#newParent");
rangeObj.surroundContents(newParent)

toString()

返回表明當前 Range 對象的字符串，例如當前選擇的文本。

參數：

無

示例：

var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
var rangeStr = rangeObj.toString();

選區中的多個區域

一個 Selection 對象表示用戶選擇的區域（Range 對象）的集合，一般它只包含一個區域，訪問方式以下：

//獲取一個 Selection 對象
var selObj = window.getSelection();
//獲取一個 Range 對象
var rangeObj  = selObj.getRangeAt(0);

只有火狐瀏覽器實現了多個區域，以下圖所示：

修改選區樣式

使用 ::selection 選擇器能夠匹配被選中的部分。
目前只有一小部分 CSS 屬性能夠用於 ::selection 選擇器：

示例

示例地址

參考

Selection

Range

筆記 Javascript的Selection對象：基本屬性

利用 javascript 實現富文本編輯器

What is anchorNode , baseNode , extentNode and focusNode in the object returned by document.getSelection?

Coordinates of selected text in browser page

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaScript中對光標和選區的操做

Selection 對象

屬性：

方法：

addRange(range)

參數：

示例：

collapse(parentNode,offset)

參數：

示例：

collapseToEnd()

參數：

示例：

collapseToStart()

參數：

示例：

containsNode(aNode,aPartlyContained)

參數：

示例：

deleteFromDocument()

參數：

示例：

extend(node,offset)

參數：

示例：

getRangeAt(index)

參數：

示例：

modify(alter,direction,granularity)

參數：

示例：

removeAllRanges()

參數：

示例：

removeRange(range)

參數：

示例：

selectAllChildren(parentNode)

參數：

示例：

setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

參數：

示例：

toString()

參數：

示例：

Range 對象

屬性：

方法：

cloneContents()

參數：

示例：

cloneRange()

參數：

示例：

collapse(toStart)

參數：

示例：

compareBoundaryPoints(how, sourceRange)

參數：

返回值

示例：

comparePoint(referenceNode,offset)

參數：

示例：

createContextualFragment(tagString)

參數：

示例：

deleteContents()

參數：

示例：

extractContents()

參數：

示例：

getBoundingClientRect()

參數：

示例：

getClientRects()

參數：

示例：