npm包rangyinputs使用教程

前言

在前端开发中，我们经常需要对文本进行各种操作，例如选中一段文本，插入一段文本等等。这时候我们就需要使用rangyinputs这个npm包来帮助我们进行文本操作。

Rangyinputs是一个轻量级的js库，封装了HTML5 input元素的一些文本范围操作。支持在IE6+，Firefox 1.5+，Safari 2.0+，Opera 9.5+，Chrome和Edge中使用。

安装

在使用rangyinputs之前，需要先安装它。可以通过npm来安装。

npm install rangyinputs --save

快速入门

初始化

首先，在我们的html文件中引入rangyinputs库。

<script src="node_modules/rangyinputs/rangyinputs.min.js"></script>

然后，我们需要为需要操作的input元素添加rangy类。

<input type="text" class="rangy">

最后，在我们的js文件中进行初始化。

var inputEl = document.querySelector('.rangy');
rangyinputs.init(inputEl);

以上就是rangyinputs的初始化，你可以尝试使用鼠标选择文本，然后按下键盘上的删除键，观察文本的变化会发现光标移动，逻辑正确。

选中文本

rangyinputs支持选中一段文本，使用setSelection方法，该方法接受两个参数，分别为start和end，表示选中的文本的开始和结束位置。

var inputEl = document.querySelector('.rangy');
rangyinputs.init(inputEl);

// 选中input的第三到六个字符
rangyinputs.setSelection(inputEl, 2, 6);

插入文本

rangyinputs支持在特定位置插入文本，使用insertText方法，该方法接受三个参数，分别为text、start和end，表示要插入的文本，以及插入的开始和结束位置。

var inputEl = document.querySelector('.rangy');
rangyinputs.init(inputEl);

// 在input的第五个字符位置插入'hello'
rangyinputs.insertText(inputEl, 'hello', 4, 4);

替换文本

rangyinputs支持在特定位置替换文本，使用replaceSelectedText方法，该方法接受两个参数，分别为text和document，表示要替换的文本和文档对象，该方法将文本作为document中的一个文本节点来进行替换。

var inputEl = document.querySelector('.rangy');
rangyinputs.init(inputEl);

// 将input的第三到六个字符替换为'new'
rangyinputs.replaceSelectedText(inputEl, 'new');

获取文本

rangyinputs支持获取文本，使用getSelection方法，该方法返回一个Selection对象，我们可以通过该对象获取选中的文本。

var inputEl = document.querySelector('.rangy');
rangyinputs.init(inputEl);

var selection = rangyinputs.getSelection(inputEl);
console.log(selection.toString());

总结

通过本篇文章的学习，我们了解了rangyinputs这个npm包的基本使用方法，掌握了rangyinputs的常用操作。希望这篇文章对大家有所帮助。

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