ES9 中的新工具：Selections 和 Ranges

在前端开发中，我们经常需要对页面中的某些文本进行选取、高亮甚至修改，而在 ES9（ECMAScript 2018）中，新增了两个重要的工具 Selection 和 Range 可以方便实现对文本的操作。本文将详细介绍这两个新工具的用法，以及其学习和指导意义。

Selection

Selection 是一个表示用户选择的文本范围的对象，可以通过 Selection 对象访问和修改选定文本。我们可以通过以下步骤获取 Selection：

const selection = window.getSelection();

然后我们可以使用以下方法来操作 Selection：

getRangeAt(index)

获取指定范围内的 Range 对象，其中 index 表示选区范围中包含的 Range 对象的索引值。

addRange(range)

将指定的 Range 对象添加到当前选区范围中。

removeAllRanges()

清除选区中所有 Range 对象。

toString()

返回选区中的文本内容。

modify(alter, direction, granularity)

根据指定的参数对选区进行修改，其中 alter、direction 和 granularity 三个参数分别代表对选区进行哪种调整、调整的方向和调整的粒度。例如，我们可以使用以下代码扩大选区：

const selection = window.getSelection();
selection.modify('extend', 'forward', 'character');

Range

Range 表示文档中的连续范围，可以表示文本范围、插入符位置、图片等多种范围。我们可以通过以下步骤创建 Range：

const range = document.createRange();

然后我们可以使用 Range 中的一些方法来操作它：

setStart(startNode, startOffset)

设置 Range 的起始点。

setEnd(endNode, endOffset)

设置 Range 的结束点。

insertNode(node)

在 Range 中插入一个节点。

deleteContents()

删除 Range 中的所有内容。

cloneContents()

克隆 Range 中的所有节点。

extractContents()

提取 Range 中的所有内容。

toString()

返回 Range 中的文本内容。

示例代码

接下来，让我们通过一个示例来演示使用 Selection 和 Range 进行文本选取和修改：

<div id="text">这是一段文本，可以进行文本操作。</div>

<button id="highlight" onclick="highlight()">高亮选取区域</button>
<button id="replace" onclick="replace()">替换选区文字</button>

// www.javascriptcn.com code example
function highlight() {
  const range = document.createRange();
  const textNode = document.getElementById('text').firstChild;
  range.setStart(textNode, 5);
  range.setEnd(textNode, 10);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

function replace() {
  const range = window.getSelection().getRangeAt(0);
  const newNode = document.createTextNode('被替换的文字');
  range.deleteContents();
  range.insertNode(newNode);
  range.setStart(newNode, 0);
  range.setEnd(newNode, 6);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

在该示例中，我们分别绑定了高亮选区域和替换选区文字的按钮事件，通过 Range 对象操作选中的文本。其中 highlight 函数会选中文本范围，replace 函数则会替换文本范围。通过这样的技巧，我们可以实现各种对文本的操作。

学习和指导意义

ES9 中的 Selections 和 Ranges 带来了更加灵活、方便的文本操作功能，极大地提高了前端开发效率。同时，学习和掌握相关知识可以拓展我们的前端技术栈，让我们在工作中更加得心应手。因此，我们需要认真学习和了解 Selection 和 Range 的使用方法，并通过实践不断提高自己的能力。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6a529a941bf7134c6c015