Window getSelection() 方法

getSelection() 是一个非常有用的 JavaScript 方法，它允许开发者获取用户当前选中的文本。这个方法返回一个 Selection 对象，该对象包含了用户选择的所有文本的详细信息。

Selection 对象

Selection 对象是一个表示用户当前选中区域的对象。它提供了一些方法和属性来操作和获取选中的文本。

属性

anchorNode

• 描述: 返回选区的起点所在的节点。
• 类型: Node
• 示例:

  const selection = window.getSelection();
  console.log(selection.anchorNode);

focusNode

• 描述: 返回选区的终点所在的节点。
• 类型: Node
• 示例:

  const selection = window.getSelection();
  console.log(selection.focusNode);

anchorOffset

• 描述: 返回选区的起点相对于 anchorNode 的偏移量。
• 类型: Number
• 示例:

  const selection = window.getSelection();
  console.log(selection.anchorOffset);

focusOffset

• 描述: 返回选区的终点相对于 focusNode 的偏移量。
• 类型: Number
• 示例:

  const selection = window.getSelection();
  console.log(selection.focusOffset);

isCollapsed

• 描述: 如果选区为空，则返回 true；否则返回 false。
• 类型: Boolean
• 示例:

  const selection = window.getSelection();
  console.log(selection.isCollapsed);

rangeCount

• 描述: 返回选区中的范围数量。
• 类型: Number
• 示例:

  const selection = window.getSelection();
  console.log(selection.rangeCount);

方法

toString()

• 描述: 返回选区中的文本。
• 返回值: String
• 示例:

  const selection = window.getSelection();
  console.log(selection.toString());

getRangeAt(index)

• 描述: 返回指定索引位置的范围。
• 参数:
  • index: 范围的索引位置。
• 返回值: Range
• 示例:

  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  console.log(range);

addRange(range)

• 描述: 将一个范围添加到选区。
• 参数:
  • range: 要添加的 Range 对象。
• 示例:

  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNode(document.getElementById('myElement'));
  selection.addRange(range);

removeAllRanges()

• 描述: 移除选区中的所有范围。
• 示例:

  const selection = window.getSelection();
  selection.removeAllRanges();

collapse(node, offset)

• 描述: 将选区收缩到一个点。
• 参数:
  • node: 收缩到的节点。
  • offset: 收缩到的偏移量。
• 示例:

  const selection = window.getSelection();
  selection.collapse(document.body, 0);

extend(node, offset)

• 描述: 扩展选区到另一个点。
• 参数:
  • node: 扩展到的节点。
  • offset: 扩展到的偏移量。
• 示例:

  const selection = window.getSelection();
  selection.extend(document.body, 50);

selectAllChildren(node)

• 描述: 选择节点的所有子节点。
• 参数:
  • node: 节点。
• 示例:

  const selection = window.getSelection();
  selection.selectAllChildren(document.getElementById('myElement'));

使用示例

以下是一些使用 getSelection() 和 Selection 对象的示例：

获取当前选中的文本

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ------------------- ----------
-------
------
    -- --------------------------
    ------- ------------------------------------------

    --------
        -------- --------------- -
            ----- --------- - ----------------------
            ----------------------------
        -
    ---------
-------
-------

操作选区

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ------------------- ------------
-------
------
    -- --------------------------
    ------- ---------------------------------
    ------- ----------------------------------------

    --------
        -------- ----------- -
            ----- --------- - ----------------------
            ----- ----- - -----------------------
            -----------------------------------------------------
            ----------------------------
            --------------------------
        -

        -------- ---------------- -
            ----- --------- - ----------------------
            ----------------------------
        -
    ---------
-------
-------

通过这些示例，我们可以看到 getSelection() 和 Selection 对象如何帮助我们获取和操作用户选中的文本，从而实现更丰富的交互体验。