前言

之前看quill源码(一个富文本编辑器)的时候第一次接触Range与Selection对象，之前也写过一篇文章总结了这两个对象，不过感觉略水，正好现在在重构一个atwho的功能，特写几篇总结下。、

Selection

Selection是什么

selection是对当前激活选中区（即高亮文本）进行操作的对象。

Selection有什么用

我遇见的比较主要的就是获取选中区的Range

Selection例子

读者可以选中一些文字然后控制台输入下列代码

userSelection = window.getSelection();
userSelection.toString()

Range

Range是什么

所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range。

Range有什么用

试想一下，在富文本编辑器里面，有一些情况是加粗或者倾斜选中的内容，Range指HTML文档中任意一段内容。

在 HTML5 中，一个 Range 对象代表页面上的一段连续区域。通过 Range 对象，可以获取或修改页面上的任何区域。包含获取，修改，删除和替换等操作。

Range的例子

userSelection = window.getSelection();
userSelection.getRangeAt(0).toString()

Range与Selection

每一个selection对象都有一个或者多个Range对象，每一个range对象代表用户鼠标所选取范围内的一段连续区域，在firefox中，可以通过ctrl键可以选取多个连续的区域，因此在firefox中一个selection对象有多个range对象，在其他浏览器中，用户只能选取一段连续的区域，因此只有一个range对象。
所以你可以看到userSelection.getRangeAt(0)这个为什么会有个0
getRangeAt方法有一个参数index，代表该Range对象的序列号；我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了内容；

属性与方法

由于这种属性和方法的东西太多了，罗列出来没什么用，我就说一些我用过的部分属性和方法。

Range对象的我用过的属性与方法(待补充)

setStart, setEnd等

setStart方法 用于将某个节点中的某处位置指定为Range对象所代表区域的起点位置，使用方法如下：

rangeObj.setStart(node,curIndex);

如上代码rangeObj代表一个Range对象，该setStart方法使用2个参数，第一个参数node代表一个节点，第二个参数是一个数字，当第一个参数node所代表的节点是一个内容为一段文字的文字节点时，该参数值用于指定将第几个文字的结束位置作为Range对象所代表的区域的起点位置；当第一个参数node所代表的节点中包括其他子节点时，该参数值用于将第几个子节点的结束位置指定为Range对象所代表的区域的起点位置；

Selection对象的我用过的属性与方法(待补充)

getRangeAt(index)
从当前selection对象中获得一个range对象。
index：参考rangeCount属性。
返回：根据下标index返回相应的range对象。

collapse(parentNode, offset)
将开始点和结束点合并到指定节点（parentNode）的相应（offset）位置。

实战

需求是获取光标之前的内容，这个在我实现atwho(@)和添加标签(#)的时候使用过。

代码

// 这个函数获取用户选择部分的Range对象
function getRange() {
  const selection = window.getSelection()
  if (selection && selection.rangeCount > 0) {
    return selection.getRangeAt(0)
  }
}
//这个获取光标前的Range
function getPrecedingRange() {
  const r = getRange()
  if (r) {
    const range = r.cloneRange()
    range.collapse(true)
    // var el = closest(range.endContainer, d => d.contentEditable)
    // range.setStart(el, 0)
    range.setStart(range.endContainer, 0)
    return range
  }
}
// have fun
getPrecedingRange().toString()