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

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

在一些業務場景，例如高亮文字、輸入編輯、等場景中需要對遊標和選取範圍進行操作時，可以使用瀏覽器提供的Selection 物件和Range 物件來操作遊標和選取範圍。

Selection 物件

Selection 物件表示使用者選擇的選取範圍或插入符號的目前位置，它可能橫跨多個元素。

//获取 Selection 对象
window.getSelection();

使用者可能從左到右（與文件方向相同）選擇文字或從右到左（與文件方向相反）選擇文字。

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

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

如下圖所示：

#屬性：

• • ##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： 一個區域物件
  #範例：<pre class='brush:php;toolbar:false;'>&lt;p id=&quot;text&quot;&gt;文本&lt;/p&gt;</pre><pre class='brush:php;toolbar:false;'>//添加一个选区 var text = document.querySelector(&quot;#text&quot;); 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);

• 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>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中文網其他相關文章！