JS 处理文档选择和范围创建【createRange | getSelection】

介绍

1、const selection = window.getSelection();

说明：
1、用于获取用户当前文档选择的对象；
2、它返回一个 Selection 对象，该对象代表了用户选择的文本范围（可以包含一个或多个范围，因为用户可以同时选择多个不相邻的文本部分）；

基本属性：

• anchorNode：表示选择范围的起始节点；
• anchorOffset：表示选择范围的起始偏移量（字符数或子元素的索引）；
• focusNode：表示选择范围的结束节点；
• focusOffset：表示选择范围的结束偏移量；
• baseNode：表示选择范围的起始节点。这通常是一个 DOM 元素或文本节点；
• baseOffset：表示选择范围的起始偏移量。它表示从 baseNode 的开始位置（0）开始的字符偏移量或子元素的索引；
• extentNode：表示选择范围的结束节点。这也通常是一个 DOM 元素或文本节点；
• extentOffset：表示选择范围的结束偏移量。它表示从 extentNode 的开始位置（0）开始的字符偏移量或子元素的索引；
• isCollapsed：: 一个布尔值，指示选择范围是否是折叠的（即起点和终点相同）；

说明：
1、折叠的情况：在折叠的选择范围中，起点和终点的节点是相同的，偏移量也相同，因为用户只是设置了插入点（光标）而没有选择文本范围。
2、非折叠的情况：在非折叠的选择范围中，起点和终点的节点可以相同，也可以不同，但偏移量一定不同。这表示用户已经选择了一段文本范围，起点和终点指向所选择文本范围的开始和结束位置。

• rangeCount：表示当前选择中的范围数量；
• type： 属性是只读的，表示选择范围的类型，可以是 “Caret”（插入符号，即折叠的选择范围），“Range”（实际的文本选择范围）或其他类型，具体取决于用户的选择操作，“None”（还没有选择范围，即没有任何焦点信息）；

基本方法：

• addRange(range): 向选择中添加一个范围对象。可以使用这个方法将自定义的范围添加到用户的文本选择中。
• removeRange(range): 从选择中移除一个范围对象。如果您需要删除之前添加的范围，可以使用这个方法。
• removeAllRanges(): 从选择中移除所有范围对象。这将清空当前选择中的所有范围，将选择重置为空。
• getRangeAt(index): 获取指定索引位置的范围对象。如果用户的选择包含多个不相邻的范围，您可以使用这个方法来访问它们。
• toString(): 返回选择范围中的文本内容。这是一个便捷的方法，用于获取用户选择的文本。（相当于所有选中范围是一段dom，然后获取dom的innerText）
• selectAllChildren(container): 选择指定容器元素的所有子元素。这将把选择范围设置为指定容器的所有内容。
• collapse(node, offset): 折叠选择范围到指定节点的指定偏移量。这用于创建折叠的选择（插入符号）。【即移动光标位置，offset从0开始，没传就是0】
• extend(node, offset): 扩展选择范围到指定节点的指定偏移量。这用于扩展文本范围选择。

2、const range = document.createRange()

说明：
1、是用于创建新的文本范围（Range）对象的方法，它是 Document Object Model (DOM) 的一部分，通常用于处理文档中的文本和元素选择。通过调用 document.createRange()，可以创建一个新的、空的文本范围对象 range。然后，您可以使用该范围对象来定义其起始点和终点，以便操作文档中的文本和元素。
2、使用 Range 对象，您可以执行各种操作，如高亮文本、插入新文本、删除文本等。它对于富文本编辑器、文本操作和选择性处理非常有用

基本属性：

• startContainer：范围的起始节点（通常是一个 DOM 元素或文本节点）；
• startOffset：起始节点内的偏移量，表示从起始节点的开头（通常是字符或子元素的索引）；
• endContainer：范围的终点节点；
• endOffset：终点节点内的偏移量；

基本方法：

• setStart(node, offset)：设置范围的起始点；
• setEnd(node, offset)：设置范围的终点；
• selectNode(node)：选择一个特定的节点及其所有子节点；
• selectNodeContents(node)：选择一个节点的所有子节点；
• deleteContents()：用于删除文本范围内的内容，包括文本节点、元素节点等。它会从文档中移除所选择的内容，但不会删除文档结构；
• insertNode(node)：用于在文本范围的起始位置插入节点，可以是文本节点、元素节点或其他类型的节点；
• collapse(toStart)：用于将文本范围折叠到起始点或终点，取决于 toStart 参数的值。如果 toStart 为 true，则折叠到起始点，如果为 false，则折叠到终点；
• cloneRange()：用于创建当前文本范围的副本。这是一个非常有用的方法，允许您在不影响原始范围的情况下创建一个新范围，以便进行独立的操作；
• setStartAfter(refNode)：用于设置文本范围的起始点为 refNode 元素之后。这是一个很有用的方法，可以在文档中定位文本范围的起始位置；