Selection对象

被选择文本示例代码: 

<p>发大幅<strong>大大泡泡糖</strong>度那附近那<strong>小头爸爸</strong>多好撒节点是的是</p>

以下几个属性和方法兼容性良好，而且对文本和输入框都有效。

var selObj = window.getSelection(); 
// 获取跟选择范围有关的信息
var selRange = selObj.getRangeAt(0);
// 返回选中的文本
var selectedText = selObj.toString();
// 返回聚焦元素
var active = document.activeElement;

锚点是用户开始选择的位置，焦点是用户选择结束的位置。如果使用桌面鼠标进行选择，则锚点是按下鼠标按钮的位置，焦点是释放鼠标按钮的位置。锚点和焦点不应与选择的开始和结束位置混淆。

一、Selection属性

1. Selection.anchorNode

    返回选择的锚点的节点。如果文档中从未存在选择，则返回null。

2. Selection.anchorOffset

    返回一个数字，表示选择的锚点的偏移量。如果anchorNode是文本节点，则这是锚点之前的anchorNode中的字符数。如果anchorNode是一个元素，则这是锚点之前的anchorNode的子节点数。

3. Selection.focusNode

    返回选择的焦点的节点。如果文档中从未存在选择，则返回null。

4. Selection.focusOffset

    返回一个数字，表示选择的焦点的偏移量。如果focusNode是文本节点，则这是焦点之前的focusNode中的字符数。如果focusNode是一个元素，则这是焦点之前的focusNode的子节点数。

5. Selection.isCollapsed

    返回一个布尔值，表示锚点和焦点是否位于同一位置。

6. Selection.rangeCount

    返回选择中的范围数。

7. Selection.type

    返回当前选择的类型（Range，Caret 等）。

二、Selection方法

1. Selection.addRange()

    添加选择范围（目前只有Firefox支持多个选择范围）。

2. Selection.containsNode(node [，partial])

   表示某个节点是否是选择的一部分。

    partial 当设置为true时，节点的一部分是选择的一部分时返回true。当设置为false时，仅在整个节点是选择的一部分时返回true。默认是false。

3. Selection.deleteFromDocument()

    从文档中删除选择的内容。

4. Selection.removeRange(range)

    从选择中删除范围。

5. Selection.removeAllRanges()

    从选择中删除所有范围。别名是 Selection.empty()。

6. Selection.extend(node [,offset])

    将选区的焦点移动到指定点。

  参数：node - 将移动焦点的节点。

       offset - 焦点移动到node的偏移位置。默认为0（按子节点的数量算）。

7. Selection.getRangeAt(index)

    返回其中一个选择范围。

8. Selection.selectAllChildren(parentNode)

    选中指定节点的所有子节点。

9. Selection.setBaseAndExtent(anchorNode，anchorOffset，focusNode，focusOffset)

    将选择设置为包括两个指定DOM节点的全部或部分以及位于它们之间的任何内容的范围。

10. Selection.toString()

      返回选中的文本。

 

参考：https://developer.mozilla.org/en-US/docs/Web/API/Selection