淺談JavaScript中如何操作遊標和選區？-js教程-PHP中文網

JavaScript中如何操作遊標和選取範圍？以下這篇文章帶大家了解 Selection 物件和 Range 對象，介紹一下怎麼藉助這兩個物件來操作遊標和選取範圍。

淺談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)
向選取範圍（
物件）中新增一個區域（
Range
物件）。
參數：

range：一個區域物件
#範例：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><p id="text">文本</p></pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">//添加一个选区 var text = document.querySelector("#text"); var selObj = window.getSelection(); var rangeObj = document.createRange(); rangeObj.selectNode(text); selObj.addRange(rangeObj);</pre><div class="contentsignin">登入後複製</div></div>
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中如何操作遊標和選區？

示例地址：https://www.kkkk1000.com/images/SelectionRange/selection.html

更多编程相关知识，请访问：编程视频！！

以上是淺談JavaScript中如何操作遊標和選區？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

淺談JavaScript中如何操作遊標和選區？

Selection 物件

#屬性：

選擇的是一個範圍。

注意：

方法：

Range

collapse(parentNode, offset)

參數：

： 遊標落在的目標節點

参数：

示例：

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

参数：

示例：

insertNode(newNode)

参数：

示例：

intersectsNode(referenceNode)

参数：

示例：

isPointInRange(referenceNode,offset)

：遊標落在的目標節點