马黑黑《初识 Selection 对象》

醉美水芙蓉

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户按下鼠标左键不放并拖拽鼠标经过文字而产生。调用 window.getSelection() 方法可以获取 Selection 对象。

演示：点击此按钮将会在上面的文本段落中随机创建选区

正如文本开头引用框所介绍的，你也可以在上面的文本段落中自行选择任意文本。上面介绍 Selection 对象的引用框集成有一个功能：用鼠标手动选择任意文本，都会弹出一个 alert 窗口，窗口上展现被选择文本的相关信息。功能的实现仅使用了一个方法：selection.toString()，该方法返回选区内的完整文本，toString 是转换为字符串的意思。

window.getSelection() 方法返回的是一个 Selection（选区）对象，该对象拥有如下主要属性：

• anchorNode ：只读，返回选区起点所在的节点（Node）。anchor是“锚”之意，指选区开始时的定位点（鼠标按下时的那个点）
• anchorOffset ：只读，返回选区起点在 anchorNode 中的位置偏移量。需要注意两种情形：
  1. 如果 anchorNode 是文本节点、注释节点，返回锚点（anchor）到该节点中第一个字的字符个数
  2. 如果 anchorNode 是元素节点，返回锚点（anchor）之前的同级节点总数
• focusNode ：只读，返回选区终点所在的节点。focus意味“焦点”，这里指选区起点到终点的高亮区域
• focusOffset ：只读，返回选区终点在 focusNode 中的位置偏移量。需要注意两种情形：
  1. 如果 focusNode 是文本节点、注释节点，返回焦点（focus）到该节点中的第一个字的字符个数
  2. 如果 focusNode 是元素节点，返回焦点（focus）之前的同级节点总数
• isCollapsed ：只读，返回布尔值，表示选区的起始点和终点是否在同一个位置
• ：只读，选区方向，返回forward（自左向右）或 backward（自右向左）
• rangeCount ：只读，返回选区所包含的连续范围（range）的数量

【注意】选区有方向（direction），可以自左向右或自右向左，取决于用户按下左键后往左或往右拖曳。选区的方向直接影响锚和焦点的位置，自左向右时锚前、焦点后，自右向左锚后、焦点前。

下面是获取选区对象属性值的简单演示：

请选择任意文本

这行是 id="mama" div 的p标签文本，里面有两个mark元素节点

这行是 div 标签，里面的内容是纯文本

选区（Selection）对象的主要方法则有：

• getRangeAt ：返回选区包含的指定区域（Range）的引用，即获取指定选区的范围
• collapse ：将当前的选区折叠为一个点
• extend ：将选区的焦点移动到一个特定的位置
• modify ：修改当前的选区
• collapseToStart ：将当前的选区折叠到起始点
• collapseToEnd ：将当前的选区折叠到最末尾的一个点
• selectAllChildren ：将某一指定节点的子节点框入选区
• addRange ：一个区域（Range）对象将被加入选区
• removeRange ：从选区中移除一个区域
• removeAllRanges ：将所有的区域都从选区中移除
• deleteFromDocument ：从页面中删除选区中的内容
• toString ：返回当前选区的纯文本内容
• containsNode ：判断某一个 Node 是否为当前选区的一部分

选区（Selection）对象的方法很多需要配合 range 对象使用，如开头随机选择选区就用上了 range 对象。下例仅演示 toStrong 和 delecteFromDocument 方法：

选择本此方框内的任意文本会获取所选择的文本然后删除掉，直至删完为止（选择后如果没有弹出alert窗口，请再单击一下此方框）。全部删除文本内容后可单击下方按钮重置。

重置方框文本

【附】本文基于选区的核心JS代码（自动获取）