JavaScript 选择范围：SelectionRange-编程知识

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

✨ 前言

文本选择 是 web 开发中的一个常见需求，例如高亮选定文本、复制粘贴文本、实现文本编辑器等。传统的 JavaScript 方法无法满足所有场景的需求，例如无法获取选定文本的范围、无法操作选定内容等。

SelectionRange 是浏览器提供的一个 API，用于解决文本选择问题。它可以获取或设置选中的文本、操作选定内容以及扩展或缩小选定范围。

理解 SelectionRange 的工作原理和应用场景，对于开发人员来说至关重要。本文将深入探讨 SelectionRange，并提供大量图文并茂的代码示例，帮助你：

掌握 SelectionRange 的工作原理
了解如何使用 SelectionRange 获取选定文本的范围
学习如何使用 SelectionRange 操作选定内容
掌握 SelectionRange 的应用场景
了解 SelectionRange 的注意事项

无论你是初学者还是经验丰富的开发人员，本文都将为你提供一些有价值的信息。

在阅读本文之前，请确保你已经具备以下基础知识：

HTML 基础
JavaScript 基础

准备好了吗？让我们开始吧！

以下是一些关于 SelectionRange 的常见问题：

1. 什么时候应该使用 SelectionRange？

当你需要获取选定文本的范围时。
当你需要操作选定内容时，例如高亮、复制、粘贴、删除等。
当你需要扩展或缩小选定范围时。

2. SelectionRange 与传统的文本选择方法有什么区别？

SelectionRange 可以获取选定文本的范围，而传统的文本选择方法只能获取选中的文本内容。
SelectionRange 可以操作选定内容，而传统的文本选择方法只能获取选中的文本内容。
SelectionRange 可以扩展或缩小选定范围，而传统的文本选择方法只能设置选定范围的开始和结束位置。

3. 应该在哪些场景中使用 SelectionRange？

高亮选定文本
复制粘贴文本
实现文本编辑器
开发富文本编辑器

4. 使用 SelectionRange 时需要注意哪些问题？

SelectionRange 可能会影响页面的性能，因此需要谨慎使用。
SelectionRange 无法获取所有选定范围，例如由 CSS 伪类或浏览器扩展程序引起的选定范围。

希望这些信息能够帮助你更好地理解和使用 SelectionRange！

✨ 正文

简介

SelectionRange 是 JavaScript 中的一个 API，用于表示文本选择范围。它可以用于获取或设置选中的文本、操作选定内容以及扩展或缩小选定范围。

SelectionRange 对象

SelectionRange 对象包含以下属性：

startContainer: 选定范围的开始容器
startOffset: 选定范围在开始容器中的偏移量
endContainer: 选定范围的结束容器
endOffset: 选定范围在结束容器中的偏移量
collapsed: 指示选定范围是否折叠（即是否只有一个字符被选中）

获取 SelectionRange 对象

可以通过以下方法获取 SelectionRange 对象：

window.getSelection().getRangeAt(index): 获取当前选定的所有范围中的指定范围
document.createRange(): 创建一个新的空范围

操作 SelectionRange 对象

可以使用以下方法操作 SelectionRange 对象：

setStart(node, offset): 设置选定范围的开始位置
setEnd(node, offset): 设置选定范围的结束位置
collapse(toStart): 将选定范围折叠到开始位置或结束位置
selectNode(node): 选中指定的节点
selectNodeContents(node): 选中指定节点的所有内容

代码示例

// 获取选定范围
const selection = window.getSelection();
const range = selection.getRangeAt(0);// 获取选定范围的开始和结束位置
const startContainer = range.startContainer;
const startOffset = range.startOffset;
const endContainer = range.endContainer;
const endOffset = range.endOffset;// 设置选定范围的开始和结束位置
range.setStart(document.getElementById("start"), 0);
range.setEnd(document.getElementById("end"), 10);// 将选定范围折叠到开始位置
range.collapse(true);// 选中指定的节点
range.selectNode(document.getElementById("node"));// 选中指定节点的所有内容
range.selectNodeContents(document.getElementById("node"));

SelectionRange 的应用场景

高亮选定文本
复制粘贴文本
实现文本编辑器
开发富文本编辑器

更多信息

SelectionRange API: <移除了无效网址>: <移除了无效网址>
SelectionRange 教程: <移除了无效网址>

使用 SelectionRange API 操作选定文本

// 获取选定范围
const selection = window.getSelection();
const range = selection.getRangeAt(0);// 高亮选定文本
range.addRangeClass("highlight");// 复制选定文本
const text = range.toString();
navigator.clipboard.writeText(text);// 粘贴文本
const newRange = document.createRange();
newRange.setStart(document.getElementById("cursor"), 0);
newRange.setEnd(document.getElementById("cursor"), 0);
newRange.insertNode(document.createTextNode(text));// 删除选定文本
range.deleteContents();