先来看下面两个selection结果：
selection对象一：
selection对象二：
很奇怪，为什么同样选中一段文字，为什么selection对象的属性会不一样呢？
那就需要明确一下Selection对象的各个属性的意义了。
-
锚点（anchor）
锚指的是一个选区的起始点。当我们使用鼠标选择一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。
-
焦点（focus）
选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。
-
范围（range）
范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围。“范围”会被作为range对象返回。Range对象也能通过DOM创建、增加、删减。
-
如果
anchorNode
是文字节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）
-
如果
anchorNode
是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是
anchorNode
的子节点)
-
如果
focusNode
是文字节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。
-
如果
focusNode
是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
-
getRangeAt
返回选区开始的节点（Node）。
因为通常情况下用户只能选择一个范围，所以只有一个选区（range），此方法一般为getRangeAt(0)
-
collapse(光标落在的目标节点, offset)
将当前的选区折叠为一个点
-
extend
将选区的焦点移动到一个特定的位置。
-
modify
修改当前的选区。
-
collapseToStart
将当前的选区折叠到起始点。
-
collapseToEnd
将当前的选区折叠到最末尾的一个点。
-
selectAllChildren
将某一指定节点的子节点框入选区
-
addRange
一个区域（Range）对象将被加入选区。
-
removeRange
从选区中移除一个区域。
-
removeAllRanges
将所有的区域都从选区中移除。
-
deleteFromDocument
从页面中删除选区中的内容。
-
selectionLanguageChange
当键盘的朝向发生改变后修改指针的Bidi优先级。
-
toString
返回当前选区的纯文本内容。
-
containsNode
判断某一个node是否为当前选区的一部分。
所以现在就可以明白为什么同样选中一段文字，Selection对象不一样了吧？
用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。anchor指向用户开始选择的地方，而focus指向用户结束选择的地方。
文章目录selection对象术语属性方法window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。selection对象先来看下面两个selection结果：selection对象一：selection对象二：很奇怪，为什么同样选中一段文字，为什么selection对象的属性会不一样呢？那就需要明确一下Selection...
import parseNodes from "parse-
window
.get
selection
" ;
const parseNodes = parseNodes ( ) ;
示例演示代码：
import React , { Component } from "react" ;
import parseNodes from "parse-
window
.get
selection
" ;
class App extends Component {
constructor ( ) {
super ( ) ;
this . state = {
parsedNodes : [ ]
boundingHeight 获取绑定TextRange
对象
的矩形的高度
boundingLeft 获取绑定TextRange
对象
的矩形左边缘和包含TextRange
对象
的左侧之间的距离
offsetLeft 获取
对象
相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop 获取对
3.侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必得裨补阙漏，有所广益。
8.愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏，臣不胜受恩感激。
4.将军向宠，性行淑均，晓畅军事，试用之于昔日，先帝称之曰...
昨天晚上折腾了几个小时加今天的半天，终于搞定了这个问题
不得不感慨，就算看起来再微小的需求，实现起来还真得花一番功夫
只做了一点微小的工作，很是惭愧现在的解决方案，div输入的字符串的每一位都映射到一个数组
元素有两种状态，0表示正常显示，1表示需要被加粗，由此可以推出多种状态，如果某段字符串被选中，它在数组内的对应元素就会被设置成相对的状态码
再根据这个数组来渲染innerHTML
开发中，时常会遇到一个开发场景。当我们在编辑一个富文本的时候。当用户选择了某些文字。我们需要弹出一个窗，让用户选择是否把它变成可粗体，比如下面这个图
当然，今天不会直接敲出这个效果，而是解析下而已。毕竟敲出来对新手不友好，需要给予更多的时间思考
通过测试多次。我们发现了几个问题，
1.触发这事件的效果，是需要在鼠标起来的时候触发。
2.鼠标起来的时候，如果被选中的包含太多了。比如多个元素，则不显示操作
简单版本就只有这两点，更复杂的效果是还要考虑类似‘ctrl’+‘A’时的情况
对于上述问题，第一点，使用
getPosition(element) { //获得光标
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parent
Window
;
var sel;
if (typeof win.get
Selection
!= "undefined") { //谷歌、火狐
sel = win.getSel
使用
window
.get
Selection
() 方法获取鼠标划取部分的起始位置和结束位置
返回一个
Selection
对象
，表示用户选择的文本范围或光标的当前位置。
const
selection
=
window
.get
Selection
() ;
selection
是一个
Selection
对象
。 如果想要将
selection
转换为字符串，可通过连接一个空字符串...
偶尔在一次需求中遇到这样的情景：将鼠标选中网页上面的文字以及图片，获取选中的文字与图片然后传给后台
let selObj =
window
.get
Selection
();
let selRange = selObj.getRangeAt(0);
// 网上很多说这样就可以获取文本和图片
window
.get
Selection
().getRangeAt(0);
// 再详细点的话可以打印一下selRange
打印
window
.get
Selection
().getRangeAt(0)可以看到这个
对象
的6个
if (
window
.get
Selection
) {
var sel =
window
.get
Selection
();
alert(sel.rangeCount); //选区个数, 通常为 1 .
sel.deleteFromDocument(); //清除选择的内容
var r = sel.getRangeAt(0); //即使已经执行了deleteFromDocument
