JavaScript 中的 Range 和 Selection 对象

javascript,range,selection · 浏览次数 : 4

小编点评

**Range 构造函数** `Range` 是一个用于构建选区对象的 JavaScript 对象。它包含以下属性： * `anchorNode`: 选择器的起点节点。 * `focusNode`: 选择器的结束节点。 * `isCollapsed`: 是否未选择任何内容。 * `rangeCount`: 选择中的范围数。 * `type`: 类型，默认值为 `None`。 **常用方法** * `addRange()`：将一个 Range 对象添加到当前选区。 * `collapse()`：折叠选区到指定的节点和偏移位置。 * `collapseToEnd()`：折叠选区到当前选区的末尾，并把光标定位在末尾处。 * `collapseToStart()`：将选区折叠到当前选区的起始位置，并把光标定位在最开始处。 * `containsNode()`：判断选区是否包含指定的节点。 * `deleteFromDocument()`：从文档中删除选区内容。 * `empty()`：从选区中移除所有范围。 * `extend()`：将选区焦点节点扩展到指定的节点和偏移位置。 * `getRangeAt()`：返回选区中指定索引处的 Range 对象。 * `removeAllRanges()`：移除所有选区中的范围。 * `removeRange()`：从选区中移除指定的 Range 对象。 * `selectAllChildren()`：选中指定节点的所有子节点。 * `setBaseAndExtent()`：设置选区的起始和结束节点及偏移位置。 * `setPosition()`：设置 collapse 的别名。

正文

JavaScript 中的 Range 和 Selection 对象

前言

最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。

Range 表示选择的区间范围，Selection 表示选择的文档内容。

下面就详细说下这两个对象

一、Range

Range 接口表示一个包含节点与文本节点的一部分的文档片段。

不仅仅可以用于鼠标框选，页面上任何元素、文本都可以创建 Range。

Range 是浏览器原生的对象。

image

1. 创建 Range 实例，并设置起始位置

<body>
  <ul>
    <li>Vite</li>
    <li>Vue</li>
    <li>React</li>
    <li>VitePress</li>
    <li>NaiveUI</li>
  </ul>
</body>
<script>
  // 创建 Range 对象
  const range = new Range()
  const liDoms = document.querySelectorAll("li");
  // Range 起始位置在 li 2
  range.setStartBefore(liDoms[1]);
  // Range 结束位置在 li 3
  range.setEndAfter(liDoms[2]);
  // 获取 selection 对象
  const selection = window.getSelection();
  // 添加光标选择的范围
  selection.addRange(range);
</script>

image

可以看到，选择内容为第二行和第三行

1.1 浏览器兼容情况

image

2. Range 属性

  1. startContainer：起始节点。

  2. startOffset：起始节点偏移量。

  3. endContainer：结束节点。

  4. endOffset：结束节点偏移量。

  5. collapsed：范围的开始和结束是否为同一点。

  6. commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。

2.1. 用我们上面创建的实例来看下 range 属性的值

image

2.2. 如果我们只选择文本内容时

只选择 li 中的 itePres

image

可以看出 range 属性对应的值

image

3. Range 方法

3.1. cloneContents()

cloneContents()：复制范围内容，并将复制的内容作为 DocumentFragment 返回。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.cloneContents();
document.body.appendChild(documentFragment);

3.2. cloneRange()

cloneRange()：创建一个具有相同起点/终点的新范围， 非引用，可以随意改变，不会影响另一方。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const clone = range.cloneRange();

3.3. collapse()

collapse(toStart)：如果 toStart=true 则设置 end=start，否则设置 start=end，从而折叠范围。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
range.collapse(true);

3.4. compareBoundaryPoints()

compareBoundaryPoints(how, sourceRange)：两个范围边界点进行比较，返回一个数字 -1、0、1。

const range = document.createRange();
range.selectNode(document.querySelector("div"));
const sourceRange = document.createRange();
sourceRange.selectNode(document.getElementsByTagName("div")[1]);
const compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);

3.5. comparePoint()

comparePoint(referenceNode, offset)：返回-1、0、1具体取决于 是 referenceNode 在 之前、相同还是之后。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const returnValue = range.comparePoint(document.getElementsByTagName("p").item(0), 1);

3.6. createContextualFragment()

createContextualFragment(tagString)：返回一个 DocumentFragment。

const tagString = "<div>I am a div node</div>";
const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.createContextualFragment(tagString);
document.body.appendChild(documentFragment);

3.7. deleteContents()

deleteContents()：删除框选的内容。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
range.deleteContents();

3.8. extractContents()

extractContents()：从文档中删除范围内容，并将删除的内容作为 DocumentFragment 返回。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const documentFragment = range.extractContents();
document.body.appendChild(documentFragment);

3.9. getBoundingClientRect()

getBoundingClientRect()：和 dom 一样，返回 DOMRect 对象。

const range = document.createRange();
range.setStartBefore(document.getElementsByTagName("em").item(0));
range.setEndAfter(document.getElementsByTagName("em").item(1));
const clientRect = range.getBoundingClientRect();
const highlight = document.getElementById("highlight");
highlight.style.left = `${clientRect.x}px`;
highlight.style.top = `${clientRect.y}px`;
highlight.style.width = `${clientRect.width}px`;
highlight.style.height = `${clientRect.height}px`;

3.10. getClientRects()

getClientRects()：返回可迭代的对象序列 DOMRect。

const range = document.createRange();
range.selectNode(document.querySelector("div"));
const rectList = range.getClientRects();
const output = document.querySelector("#output");
for (const rect of rectList) {
  output.textContent = `${output.textContent}\n${rect.width}:${rect.height}`;
}

3.11. insertNode()

insertNode(node)：在范围的起始处将 node 插入文档。

const range = document.createRange();
const newNode = document.createElement("p");
newNode.appendChild(document.createTextNode("New Node Inserted Here"));
range.selectNode(document.getElementsByTagName("div").item(0));
range.insertNode(newNode);

3.12. intersectsNode()

intersectsNode(referenceNode)：判断与给定的 node 是否相交。

const range = document.createRange();
range.selectNode(document.getElementsByTagName("div").item(0));
const intersectingNode = range.intersectsNode(
  document.getElementsByTagName("p").item(0),
);

3.13. selectNode()

selectNode(node)：设置范围以选择整个 node。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);

3.14. selectNodeContents()

selectNodeContents(node)：设置范围以选择整个 node 的内容。

const range = document.createRange();
const referenceNode = document.querySelector("div");
range.selectNodeContents(referenceNode);

3.15. setStart()

setStart(startNode, startOffset)：设置起点。

const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;

3.16. setEnd()

setEnd(endNode, endOffset)：设置终点。

const range = document.createRange();
const endNode = document.getElementsByTagName("p").item(3);
const endOffset = endNode.childNodes.length;
range.setEnd(endNode, endOffset);

3.17. setStartBefore()

setStartBefore(node)：将起点设置在 node 前面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setStartBefore(referenceNode);

3.19. setStartAfter()

setStartAfter(node)：将起点设置在 node 后面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setStartAfter(referenceNode);

3.19. setEndBefore()

setEndBefore(node)：将终点设置为 node 前面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setEndBefore(referenceNode);

3.20. setEndAfter()

setEndAfter(node)：将终点设置为 node 后面。

const range = document.createRange();
const referenceNode = document.getElementsByTagName("div").item(0);
range.setEndAfter(referenceNode);

3.21. surroundContents()

surroundContents(node)：使用 node 将所选范围内容包裹起来。

const range = document.createRange();
const newParent = document.createElement("h1");
range.selectNode(document.querySelector(".header-text"));
range.surroundContents(newParent);

4. 创建 Range 的方法

4.1. Document.createRange

const range = document.createRange();

4.2. Selection 的 getRangeAt() 方法

const range = window.getSelection().getRangeAt(0)

4.3. caretRangeFromPoint() 方法

if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
}

4.4. Range() 构造函数

const range = new Range()

5. Range 兼容性

image

二、Selection

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。

1. 获取文本对象

window.getSelection()

image

image

2. Selection 术语

2.1. 锚点 (anchor)

锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。

2.2. 焦点 (focus)

选区的焦点是该选区的终点，当你用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

2.3. 范围 (range)

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围。

2.4. 可编辑元素 (editing host)

一个用户可编辑的元素（例如一个使用 contenteditable 的 HTML 元素，或是在启用了 designMode 的 Document 的子元素）。

3. Selection 的属性

首先要清楚，选择的起点称为锚点(anchor)，终点称为焦点(focus)。

  1. anchorNode：选择的起始节点。

  2. anchorOffset：选择开始的 anchorNode 中的偏移量。

  3. focusNode：选择的结束节点。

  4. focusOffset：选择开始处 focusNode 的偏移量。

  5. isCollapsed：如果未选择任何内容（空范围）或不存在，则为 true。

  6. rangeCount：选择中的范围数，之前说过，除 Firefox 外，其他浏览器最多为1。

  7. type：类型：None、Caret、Range

image

image

4. Selection 方法

4.1. addRange()

addRange(range): 将一个 Range 对象添加到当前选区。

const strongs = document.getElementsByTagName("li");
const selection = window.getSelection();
for (var i = 0; i < strongs.length; i++) {
  const range = document.createRange();
  range.selectNode(strongs[i]);
  selection.addRange(range);
}

4.2. collapse()

collapse(node, offset): 将选区折叠到指定的节点和偏移位置。

const body = document.getElementsByTagName("body")[0];
window.getSelection().collapse(body, 0);

4.3. collapseToEnd()

collapseToEnd(): 将选区折叠到当前选区的末尾，并把光标定位在原选区的末尾处。

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

4.4. collapseToStart()

collapseToStart(): 将选区折叠到当前选区的起始位置，并把光标定位在原选区的最开始处。

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

4.5. containsNode()

containsNode(node, partlyContained): 判断选区是否包含指定的节点，可以选择是否部分包含。

window.getSelection().containsNode(document.body, true);

4.6. deleteFromDocument()

deleteFromDocument(): 从文档中删除选区内容。

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

4.7. empty()

empty(): 从选区中移除所有范围（同 `removeAllRanges()``，已废弃）。

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

4.8. extend()

extend(node, offset): 将选区的焦点节点扩展到指定的节点和偏移位置。

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

4.9. getRangeAt()

getRangeAt(index): 返回选区中指定索引处的 Range 对象。

const  ranges = [];
const selection = window.getSelection();
for (let i = 0; i < selection.rangeCount; i++) {
  ranges[i] = selection.getRangeAt(i);
}

4.10. removeAllRanges()

removeAllRanges(): 移除所有选区中的范围。

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

4.11. removeRange()

removeRange(range): 从选区中移除指定的 Range 对象。

const selection = window.getSelection();
if (selection.rangeCount > 1) {
  for (let i = 1; i < selection.rangeCount; i++) {
    selection.removeRange(selection.getRangeAt(i));
  }
}

4.12. selectAllChildren()

selectAllChildren(node): 选中指定节点的所有子节点。

window.getSelection().selectAllChildren(document.body);

4.13. setBaseAndExtent()

setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 设置选区的起始和结束节点及偏移位置。

window.getSelection().setBaseAndExtent(document.getElementById('li1'), 0, document.getElementById('li3'), 1)

4.14. setPosition()

setPosition(node, offset)：collapse 的别名

window.getSelection().setPosition(document.body, 0);

5. Selection 兼容性

image

到此结束...

javascript range selection

与JavaScript 中的 Range 和 Selection 对象相似的内容：

JavaScript 中的 Range 和 Selection 对象

最近在做鼠标框选的需求，鼠标框选就需要用到 Range 和 Selection 对象。 Range 表示选择的区间范围，Selection 表示选择的文档内容。 Range 接口表示一个包含节点与文本节点的一部分的文档片段。 不仅仅可以用于鼠标框选，页面上任何元素、文本都可以创建 Range。 Se...

javascript range selection
4
JavaScript 中 toString 的奇妙使用

JavaScript 中的toString()方法，我们通常会一些其他类型的变量，转为字符串类型。但这里还有一些其他奇妙的用法。 不同的类型调用 toString() 会得到不同的结果。我们来一一分析下。 1. 函数类型 我们开发者自定义的函数，和 JavaScript 官方内置的函数，在调用 to

javascript tostring
8
JavaScript中的浅拷贝与深拷贝

前言 JavaScript中的浅拷贝和深拷贝是非常重要的概念，它们在处理对象和数组时具有不同的作用。在编程中，经常需要复制数据以便进行各种操作，但必须注意拷贝的方式，以确保得到预期的结果。 浅拷贝是创建一个新对象或数组，并将原始对象或数组的引用复制给它。这意味着新对象和原始对象将共享相同的内存地址，

javascript 拷贝
231
JavaScript中的箭头函数

前言 本文可以让你了解所有有关JavaScript箭头函数的信息。我们将告诉你如何使用ES6的箭头语法，以及在代码中使用箭头函数时需要注意的一些常见错误。你会看到很多例子来说明它们是如何工作的。 JavaScript的箭头函数随着ECMAScript 2015的发布而到来，也被称为ES6。由于其简洁

javascript 箭头 函数
850
JavaScript中的四种枚举方式

字符串和数字具有无数个值，而其他类型如布尔值则是有限的集合。 一周的日子（星期一，星期二，...，星期日），一年的季节（冬季，春季，夏季，秋季）和基本方向（北，东，南，西）都是具有有限值集合的例子。 当一个变量有一个来自有限的预定义常量的值时，使用枚举是很方便的。枚举使你不必使用魔法数字和字符串（这

javascript 四种 枚举 方式
1132
async/await初学者指南

> JavaScript中的`async`和`await`关键字提供了一种现代语法，帮助我们处理异步操作。在本教程中，我们将深入研究如何使用`async/await`来掌控JavaScript程序中的流程控制。 > ## 总览 - 如何创建JavaScript异步函数 - async关键字 - aw

async await 初学者 指南
344
如何在JavaScript中使用for循环

前言 循环允许我们通过循环数组或对象中的项并做一些事情，比如说打印它们，修改它们，或执行其他类型的任务或动作。JavaScript有各种各样的循环，for循环允许我们对一个集合（如数组）进行迭代。 在这篇文章中，我们将了解JavaScript提供的for循环。我们将看看for...in循环语句是如何

如何 javascript 使用 for
502
重学JavaScript Promise API

> 在这篇教程中，我们将掌握如何在JavaScript中创建并使用Promise。我们将了解Promise链式调用、错误处理以及最近添加到语言中的一些Promise静态方法。 ## 什么是Promise？ 在JavaScript中，一些操作是异步的。这意味着当这些操作完成时，它们产出的结果或者值并不

重学 javascript promise api
239
【技巧】JS代码这么写，前端小姐姐都会爱上你

这篇文章分享了JavaScript编程中的实用技巧，包括解构赋值的短路语法避免错误、深度解构及默认值设定，以及数组操作如条件添加元素、获取最后一个元素和使用includes优化条件判断。此外，还介绍了从URL解析参数、页面滚动功能和获取滚动距离的JS片段。作者提倡使用这些技巧提升代码质量和效率，并邀...

js
0
[转帖]Shell字符串拼接（连接、合并）

http://c.biancheng.net/view/1114.html 在脚本语言中，字符串的拼接（也称字符串连接或者字符串合并）往往都非常简单，例如： 在 PHP 中，使用.即可连接两个字符串； 在 JavaScript 中，使用+即可将两个字符串合并为一个。 然而，在 Shell 中你不需要

shell 字符串 拼接 连接
0
# 热门排行
微软 New Bing AI 申请与使用保姆级教程（免魔法） ChatGPT API使用介绍 ChatGPT开发实战 一篇带你了解如何使用纯前端类Excel表格构建现金流量表 手把手教你玩转 Excel 数据透视表 为什么 C# 可能是最好的第一编程语言 .NET 入门到高级路线 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件 React + Springboot + Quartz，从0实现Excel报表自动化 用Echarts实现前端表格引用从属关系可视化
© PmDaddy. 2023 PmDaddy教程网 All rights reserved.