npm 包 @rangy/core 使用教程

在前端开发的过程中，我们经常需要对文本进行处理、选中、高亮等操作。这时候，@rangy/core 这个 npm 包就可以派上用场了。它是一个功能强大的文本选区操作库，可以用于实现复杂的文本选区操作，例如：选中某个单词、改变选区背景颜色，甚至可以对网页中所有的链接进行高亮。本教程就详细介绍如何使用这个库。

安装

安装很简单，只需使用 npm 命令：

npm install @rangy/core

使用

基本概念

使用 @rangy/core 之前需要了解一些基础概念：

• Range：选区，表示文档中的一段区域，可以是整个文档或文档的一部分。
• Selection：选区集合，表示用于选择文档中某个区域的对象。它可以包含一个或多个 Range。
• Node：节点，文档树中的每个元素都是一个 Node 节点，如 p、div、span 等 HTML 标签。

示例

假设有以下文本：

<div>
  <p>这是一段文本，<span>文本中的部分可以</span>被选中。</p>
  <p>这是第二段文本，<span>让我们一起</span>学习前端。</p>
</div>

1. 获取选区

可以使用 rangy.getSelection() 方法获取当前选区。

let sel = rangy.getSelection();

1. 创建选区

可以使用 rangy.createRange() 方法创建新的选区。

let range = rangy.createRange();

1. 设置选区

可以使用 setStart() 和 setEnd() 方法来设置选区的起始和结束节点。

range.setStart(node, offset);
range.setEnd(node, offset);

例如，想让 "文本中的部分可以" 成为选区，可以这样实现：

let span = document.querySelector("div span");
range.setStart(span.firstChild, 0);
range.setEnd(span.firstChild.nextSibling, 9);

1. 添加选区

可以使用 addRange() 方法将选区添加到选区集合中。

sel.addRange(range);

1. 移除选区

可以使用 removeAllRanges() 方法将所有选区从选取集合中移除。

sel.removeAllRanges();

1. 高亮选区

可以使用第三方的高亮库，比如 highlight.js，来进行选区高亮。

require('highlight.js/styles/dark.css');
const hljs = require('highlight.js/lib/highlight.js');
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
// 选中文本
let code = sel.toString();
// 高亮处理
code = hljs.highlight('javascript', code).value;

总结

以上就是关于 @rangy/core 的使用教程，通过这个库，我们可以非常方便地实现复杂的文本选区操作，让我们的网页变得更加丰富多彩。

（完）

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