npm 包 within-selection 使用教程

前言

web 前端开发中常常需要获取用户选中文本的起始和结束位置，然后对选中文本进行一些处理。但是在跨浏览器兼容上，这一需求并不是那么容易实现。因此，有些开发者开发了一些基于 JavaScript 的库和工具来解决这个问题。

其中一个叫做 within-selection 的 npm 包，可以准确的获取用户选中文本的起始和结束位置，还是比较好用的。今天我们来学习一下如何使用这个 npm 包。

安装 within-selection

在开始使用之前，我们要先将 within-selection 安装到我们的项目中。使用以下命令直接安装：

npm install within-selection

安装完成之后，我们就可以在项目中使用了。

使用 within-selection

在使用 within-selection 之前，我们需要先获取到用户选择的文本内容。我们可以使用 document.getSelection 函数来获取，代码如下：

const selection = window.getSelection();
const text = selection.toString();

获取到文本之后，我们就可以使用 within-selection 了。这个包主要提供了一些方法来获取某一个元素内部选中文本的起始和结束位置。以下是包提供的主要方法：

getOffsets

getOffsets 方法可以获取元素内部选中文本的起始和结束位置，返回一个数组，第一个元素是起始位置，第二个元素是结束位置。代码如下：

const offsets = within(selection.anchorNode).getOffsets(selection.anchorOffset, selection.focusOffset);
console.log(`选中文本范围：${offsets[0]}-${offsets[1]}`);

getRangeClientRects

getRangeClientRects 方法可以获取选中文本所占据的实际矩形区域坐标列表。每个矩形有 left，top，width，height 四个属性。返回结果是一个可迭代对象，可以遍历获取所有的矩形信息。代码如下：

const rects = within(selection.anchorNode).getRangeClientRects();
for (const {left, top, width, height} of rects) {
  console.log(`选中文本所在的区域：left=${left} top=${top} width=${width} height=${height}`);
}

getSelectionHtml

getSelectionHtml 方法可以获取选中的文本在网页中的 html 内容，即包含 html 标签的文本。代码如下：

const html = within(selection.anchorNode).getSelectionHtml();
console.log(`选中的 html 内容：${html}`);

示例

下面我们演示一下如何在网页中使用以上方法。

首先，在 html 中添加一个文本框和一个显示选中文本位置的 div。

<textarea id="input" cols="30" rows="10"></textarea>
<div>选中的文本位置：(<span id="start"></span>, <span id="end"></span>)</div>

然后，在 JavaScript 中获取到文本框和 div。

const input = document.getElementById('input');
const start = document.getElementById('start');
const end = document.getElementById('end');

接着，我们监听文本框的选择事件。在选择事件处理函数中，获取到用户选中的文本，并使用 within-selection 获取文本的位置信息，然后将位置信息展示到 div 中。

input.addEventListener('select', () => {
  const selection = window.getSelection();
  const offsets = within(selection.anchorNode).getOffsets(selection.anchorOffset, selection.focusOffset);
  start.textContent = offsets[0];
  end.textContent = offsets[1];
});

最后，我们可以在网页中选择一段文本，可以看到 div 中会展示出该文本的起始和结束位置，如下图所示：

总结

通过本教程的学习，我们了解了如何使用 npm 包 within-selection 获取用户在页面上选中的文本信息的位置。希望对大家的前端开发有所帮助。

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