JavaScript如何操作光標和選區

發布時間：2022-05-06 17:00:17 來源：億速云閱讀：155 作者：iii 欄目：大數據

這篇“JavaScript如何操作光標和選區”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript如何操作光標和選區”文章吧。

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

Selection 對象

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

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

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

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

如果你使用鼠標選擇文本的話，anchor 就指你按下鼠標鍵的地方，而 focus 就指你松開鼠標鍵的地方。anchor 和 focus 的概念不能與選區的起始位置和終止位置混淆，因為 anchor 可能在 focus 的前面，也可能在 focus 的后面，這取決于你選擇文本時鼠標移動的方向，也就是按下鼠標鍵和松開鼠標鍵的位置。

如下圖所示：

JavaScript如何操作光標和選區

屬性：

anchorNode： 錨點（anchor）所在節點。
anchorOffset：

如果 anchorNode 是文本節點、注釋節點，返回錨點（anchor）到該節點中第一個字的字符個數。
如果 anchorNode 是元素節點，返回錨點（anchor）之前的同級節點總數。

focusNode： 焦點（focus）所在節點。
focusOffset：

如果 focusNode 是文本節點、注釋節點，返回焦點（focus）到該節點中的第一個字的字符個數。
如果 focusNode 是元素節點，返回焦點（focus）之前的同級節點總數。

isCollapsed： 表示選區的起始位置和終止位置是否重合的 Boolean 值，如果為 true，可以認為當前沒有內容選中。
rangeCount： 選區中包含的 Range 對象數量。
type： 描述當前選區的類型，有以下三個值：

None： 當前沒有選擇。
Caret： 僅單擊，但未選擇，選區已折疊（即光標在字符之間，并未處于選中狀態）。
Range： 選擇的是一個范圍。

注意：

以上所有屬性都是只讀屬性。

方法：

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 字符串。

示例：

var tagString = "<div>node</div>";
var range = document.createRange();
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 表示在該節點中子元素的偏移位置。
示例：
```
<p id="startNode">startNode</p>
```
```
var selObj = window.getSelection();
var rangeObj  = selObj.getRangeAt(0);
startNode = document.querySelector("#startNode");
rangeObj.setStart(startNode,0)
```

setStartAfter(referenceNode)

設置選區的起始位置在指定節點之后。

參數：

referenceNode：指定節點

示例：

<div id="startNode">startNode</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);

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

JavaScript如何操作光標和選區

修改選區樣式

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

color
background-color
text-shadow

示例

JavaScript如何操作光標和選區

以上就是關于“JavaScript如何操作光標和選區”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

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()

參數：