本篇文章分享来自小伙伴「yanghui」的一次学习总结分享，希望跟社区的同学一起探讨。
前言
平时我们做富文本开发，总是绕不过富文本选区-Selection； 什么是Selection呢？ 按照MDN的说法是：
Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。
Selection对象
首先我们先新增一个div，加上contenteditable="true"，这样就能获取到一个富文本输入框；
<div class="my-editor" contenteditable="true"></div>
获取焦点，调用window.getSelection()，我们就能获取到这样一个对象；
anchorNode - 只读，返回该选区起点所在的节点；
anchorOffset - 只读，返回一个数字，其表示的是选区起点在 anchorNode 中的位置偏移量；
- 文本节点，当前文本节点中，光标前面有几个字，就返回几；
- 非文本节点，光标前面有几个节点，就返回几；
focusNode - 只读，返回该选区终点所在的节点； focusOffset - 只读，返回一个数字，其表示的是选区终点在 focusNode 中的位置偏移量；
- 文本节点，当前文本节点中，光标前面有几个字，就返回几；
- 非文本节点，光标前面有几个节点，就返回几；
baseNode - chrome 独有，和 anchorNode 一致； baseOffset - chrome 独有，和 anchorOffset 一致； extentNode - chrome 独有，和 focusNode 一致； extentOffset - chrome 独有，和 focusOffset 一致； isCollapsed - 只读，返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置； rangeCount - 只读，返回该选区所包含的连续范围的数量； type - 只读，返回选区类型；
- None - 未聚焦选区；
- Caret - 聚焦选区，未选中选区；
- Range - 选中选区；
总结，通过查看Selection对象，我们基本能够看出富文本选区的基本展示；
例子
- 当未聚焦文本框时：anchorNode 和 focusNode 都为null，偏移量都是0，type变为None；
- 当光标聚焦文本框时：anchorNode 和 focusNode 指向文本框，偏移量都是0，type变为Caret；
- 当输入文本，光标在文字后：anchorNode 和 focusNode 指向同一文字节点，偏移量都是光标前面文字数量8，type变为Caret；
- 当上述情况，选中文本时：anchorNode 和 focusNode 指向同一文字节点，偏移量都是当前元素光标标前面文字数量，一个是3，一个是8，type变为Range；
- 当文本框内容是多元素文本时：anchorNode 和 focusNode 指向同一文字节点，偏移量都是当前元素光标标前面文字数量4，type变为Caret；
- 当上述情况，选中文字时：anchorNode 和 focusNode 指向对应文字节点，偏移量都是当前元素光标标前面文字数量，一个是0，一个是4，type变为Range；
还有其他情况，可以自己手动试试，还是很有意思的；
