web关于“选区”和“光标”相关API介绍

一、两个重要的对象：

1. Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。通常由用户拖拽鼠标经过文字而产生。
2. Range对象表示包含节点和部分文本节点的文档片段。通过 selection 对象获得的 range 对象才是我们操作光标的重点。

二、可编辑元素

1、默认的表单输入框 input和textarea

<input type="text">
<textarea></textarea>

（1）设置选区：

inputElement.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);

参数：selectionStart (起始位置)、 selectionEnd （结束位置）和 selectionDirection（方向）

（2）获取选区：

inputElement.selectionStart()
inputElement.selectionEnd()

（3）全部选中：

inputElement.select()

（4）输入框插入内容：

inputElement.setRangeText(replacement, start, end [, selectMode]);

作用：只填第一个参数，则会将内容插入手动选区位置。如果填了start和end，则就算鼠标选区，也只会粘贴到start到end范围。

第一个参数replacement ，表示需要替换的文本。start和end是起始位置，默认是该元素当前选中区域，最后一个参数selectMode，表示替换后选区的状态，有 4 个可选项

• select 替换后选中
• start 替换后光标位于替换词之前
• end 替换后光标位于替换词之后
• preserve 默认值，尝试保留选区

2、contenteditable="true"或 -webkit-user-modify: read-write;

<div contenteditable="true">yux阅文前端</div>

div{
    -webkit-user-modify: read-write;
}

（1）Window.getSelection();

返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。

（2）document.createRange();

创建一个Range对象。

（3）selection.getRangeAt(index)

返回一个包含当前选区内容的区域对象，index一般是0。

（4）selection.removeAllRanges()

从当前selection对象中移除所有的range对象，取消所有的选择只留下anchorNode（只读属性返回选区开始位置所属的节点）和focusNode属性（只读的，返回所选内容的结束位置部分所属的节点）并将其设置为null。
（5）selection.addRange(range)

向选区（Selection）中添加一个区域（Range）。

（6）range.setStart(node,offset)、range.setEnd(node,offset)

设置区域起始位置。

（7）range.selectNode(node)、range.selectNodeContents(node)

这两个都是表示选中某一节点，不同的是，selectNodeContents仅包含子节点，不包含自身。

（8）range.insertNode(newNode)

它表示在选区的起点处插入一个节点，并不会替换掉当前已经选中的，如果要替换，可以先删除。

（9）range.deleteContents()

删除文档的区域，必须是一个节点，如果是文本，可以用 document.createTextNode 来创建。

（10）range.setStartAfter(node)

 设置node元素中区间（光标）的起点为该元素的后面，终点默认就是该元素的后面，不用处理。

（11）range.surroundContents

将 Range对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。（如果Range断开了一个非Text节点，只包含了节点的其中一个边界点，就会抛出异常）

（12）range.extractContents

获取选区内容。该方法返回的是一个 DocumentFragment 对象，将选区内容添加到新节点上，然后插入新内容。

参考文献：

Web 中的“选区”和“光标”https://segmentfault.com/a/1190000041457245#item-4-10