Selection 与 Range 对象指北

前端

2023-12-21 11:19:22

选择与范围对象：掌握文本选择的精髓

在网页开发中，我们经常需要操作或查询当前页面上的文本选择。这在各种场景中都非常有用，例如：

文本编辑： 选择文本以复制、剪切或粘贴。
表单验证： 检查用户是否填写了必填字段。
富文本编辑器： 允许用户突出显示、加粗或删除文本。

这就是 Selection 和 Range 对象派上用场的时候。它们提供了对当前选择的强大控制，使我们能够以编程方式操作文本。

深入了解 Selection 对象

Selection 对象表示当前页面上的文本选择。它提供了以下属性：

getSelection()： 获取 Selection 对象的实例。
anchorNode： 包含选择开始的节点。
anchorOffset： 在 anchorNode 中选择开始的偏移量。
focusNode： 包含选择结束的节点。
focusOffset： 在 focusNode 中选择结束的偏移量。
isCollapsed： 布尔值，表示选择是否已折叠（即是否没有文本被选中）。
rangeCount： 当前选择中范围的数量。
getRangeAt(index)： 获取特定索引处的范围对象。

认识 Range 对象

Range 对象表示文本选择的范围。它提供了以下属性：

startContainer： 包含范围开始的节点。
startOffset： 在 startContainer 中范围开始的偏移量。
endContainer： 包含范围结束的节点。
endOffset： 在 endContainer 中范围结束的偏移量。
collapsed： 布尔值，表示范围是否已折叠（即是否没有文本被选中）。
deleteContents()： 从范围内删除所有内容。
insertNode(node)： 在范围的开始处插入给定的节点。
surroundContents(node)： 用给定的节点包围范围内的所有内容。
cloneRange()： 克隆范围对象。

使用示例

以下是一个使用 Selection 和 Range 对象的示例，该示例演示如何删除所选文本并插入新文本：

// 获取当前选择
const selection = window.getSelection();

// 检查选择是否已折叠
if (!selection.isCollapsed) {
  // 获取范围对象
  const range = selection.getRangeAt(0);

  // 删除所选内容
  range.deleteContents();

  // 在选择处插入文本
  const text = document.createTextNode("新的文本");
  range.insertNode(text);
}