淺談JavaScript中如何操作遊標和選區？
- 青灯夜游轉載
- 2021-06-30 10:46:063980瀏覽
JavaScript中如何操作遊標和選取範圍？以下這篇文章帶大家了解 Selection 物件和 Range 對象，介紹一下怎麼藉助這兩個物件來操作遊標和選取範圍。
在一些業務場景，例如高亮文字、輸入編輯、等場景中需要對遊標和選取範圍進行操作時，可以使用瀏覽器提供的Selection 物件和Range 物件來操作遊標和選取範圍。
Selection 物件
Selection 物件表示使用者選擇的選取範圍或插入符號的目前位置，它可能橫跨多個元素。
//获取 Selection 对象 window.getSelection();
使用者可能從左到右（與文件方向相同）選擇文字或從右到左（與文件方向相反）選擇文字。
anchor （錨點）： 指使用者開始選擇的地方。 focus （焦點）： 指使用者結束選擇的地方。
如果你使用滑鼠選擇文字的話，anchor 就指你按下滑鼠鍵的地方，而 focus 就指你放開滑鼠鍵的地方。 anchor 和focus 的概念不能與選區的起始位置和終止位置混淆，因為anchor 可能在focus 的前面，也可能在focus 的後面，這取決於你選擇文字時滑鼠移動的方向，也就是按下滑鼠鍵和放開滑鼠鍵的位置。
如下圖所示：
#屬性：
-
-
-
錨點（anchor ）所在節點。 -
anchorOffset：
如果 -
- anchorNode 是文字節點、註解節點，回傳錨點（anchor
）到該節點中第一個字的字元個數。如果 - anchorNode
是元素節點，傳回錨點（anchor）之前的同級節點總數。
-
focusNode：焦點（focus ）所在節點。 -
focusOffset：
如果 -
- focusNode 是文字節點、註解節點，回傳焦點（focus
）到該節點中的第一個字的字元數。如果focusNode 是元素節點，傳回焦點（ - focus）之前的同級節點總數。
- isCollapsed：
表示選取範圍的起始位置和終止位置是否重疊的Boolean 值，如果為
true- # ，可以認為目前沒有內容選取。
- rangeCount： 選取範圍中包含的
- Range 物件數量。
- type： 描述目前選取範圍的類型，有以下三個值：
目前沒有選擇。
Caret：僅單擊，但未選擇，選取範圍已折疊（即遊標在字元之間，並未處於選取狀態）。
Range：選擇的是一個範圍。
-
注意：
以上所有屬性都是只讀屬性。方法：
addRange(range)向選取範圍（ Selection - 物件）中新增一個區域（
Range
物件）。 參數：range
： 一個區域物件
#範例：<pre class="brush:js;toolbar:false;"><p id="text">文本</p></pre><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>collapse(parentNode, offset)
收起目前選取範圍到一個點。文檔不會發生變更。 -
參數：
parentNode： 遊標落在的目標節點
offset
： 可選，在目標節點內的偏移量範例：
<div contenteditable="true" id="text">文本</div>
//收起选区到一个点，光标落在一个可编辑元素上
var text = document.querySelector("#text")
window.getSelection().collapse(text,0);var selObj = window.getSelection(); selObj.collapseToEnd();
取消目前選取範圍，並把遊標定位在原選區的最開始處。
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>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);
只有火狐浏览器实现了多个区域，如下图所示：
修改选区样式
使用 ::selection 选择器可以匹配被选中的部分。
目前只有一小部分 CSS 属性可以用于 ::selection 选择器：
- color
- background-color
- text-shadow
示例
示例地址：https://www.kkkk1000.com/images/SelectionRange/selection.html
更多编程相关知识，请访问：编程视频！！
以上是淺談JavaScript中如何操作遊標和選區？的詳細內容。更多資訊請關注PHP中文網其他相關文章！