在前端开发中，我们经常会需要处理文本输入框的选择范围，以便进行相关操作。而 JavaScript 提供了 selectionStart 和 selectionEnd，用来获取选择范围，但是不太方便使用。这时候就可以使用 rangem 这个 npm 包，简化选择范围处理的过程。
什么是 rangem
rangem 是一个轻量级的 JavaScript 库，主要用于处理用户输入控件的选择范围。它可以帮助我们轻松地获取、设置、扩展和缩短文本框、文本域和可编辑内容的选择范围。
安装和使用
使用 rangem 前，需要先安装它。使用如下命令进行安装：
npm install rangem接下来，在需要使用 rangem 的 JavaScript 文件中，加入如下代码：
const rangy = require('rangy');
以上代码会将 rangy 模块导入你的代码。
rangem 提供了一些 API，可以轻松地操作文本框或者文本域的选择范围。
API 一览
1. 获取选择范围
rangem 提供了多种方法来获取选择范围。
rangy.getSelection()：获取用户选择的文本；rangy.getSelection().toString(): 获取选中的文本字符串。
示例代码：
const selection = rangy.getSelection(); const selectedText = selection.toString();
2. 设置选择范围
rangem 也提供了多种方法来设置选择范围。
rangy.getSelection().setStart(node, offset)：设置选择范围起始位置；rangy.getSelection().setEnd(node, offset)：设置选择范围结束位置；rangy.getSelection().setStartBefore(node)：设置选择范围以某个元素为起始点；rangy.getSelection().setEndBefore(node)：设置选择范围以某个元素为结束点；rangy.getSelection().setStartAfter(node)：设置选择范围以某个元素的后一个元素为起始点；rangy.getSelection().setEndAfter(node)：设置选择范围以某个元素的后一个元素为结束点。
示例代码：
const selection = rangy.getSelection(); const container = document.getElementById('container'); selection.setStart(container.firstChild, 2); selection.setEnd(container.lastChild, 3);
3. 扩展或缩短选择范围
rangy 还提供了多种方法来扩展或缩短选择范围。
extend(): 扩展选择范围；moveStart()：将选择范围向起始点移动；moveEnd()：将选择范围向结束点移动；collapse()：缩短选择范围至起始点或结束点。
示例代码：
-- -------------------- ---- ------- ----- --------- - --------------------- ---------------------------- --- --------------------------- --- -------------------------------- ---- ------------------------------ --- -------------------------展开代码
总结
rangem 是一个非常实用的 npm 包，可以简化文本输入框的选择范围处理过程。本文介绍了 rangem 提供的常用 API，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/77627
