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 对象

前言

最近在做鼠标框选的需求,鼠标框选就需要用到 RangeSelection 对象。

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:返回完整包含 startContainerendContainer 的最深一级的节点。

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)

一个用户可编辑的元素(例如一个使用 contenteditableHTML 元素,或是在启用了 designModeDocument 的子元素)。

3. Selection 的属性

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

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

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

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

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

  5. isCollapsed:如果未选择任何内容(空范围)或不存在,则为 true

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

  7. type:类型:NoneCaretRange

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 对象

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

JavaScript 中 toString 的奇妙使用

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

JavaScript中的浅拷贝与深拷贝

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

JavaScript中的箭头函数

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

JavaScript中的四种枚举方式

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

async/await初学者指南

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

如何在JavaScript中使用for循环

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

重学JavaScript Promise API

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

【技巧】JS代码这么写,前端小姐姐都会爱上你

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

[转帖]Shell字符串拼接(连接、合并)

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