java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果

当我们需要鼠标选中文本后，文本高亮。当再次将选中的文本选中后，取消高亮效果时该如何实现呢？

一、介绍 window.getSelection

获取鼠标选中内容，主要是利用了window.getSelection()这个API。返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。

Selection 对象所对应的是用户所选择的ranges(区域)，俗称拖蓝。默认情况下，该函数只针对一个区域，我们可以这样使用这个函数：

var selObj = window.getSelection();

var range = selObj.getRangeAt(0);

// selObj 被赋予一个 Selection对象

// range 被赋予一个 Range 对象

复制代码

调用Selection.toString() 方法会返回被选中区域中的纯文本。要求变量为字符串的函数会自动对对象进行该处理，例如：

var selObj = window.getSelection();

window.alert(selObj);

复制代码

二、一些现成的第三方库

这是一个很不错的“划词高亮”功能实现第三方库，直接引用就可以，实现简单。

参考文章可以看如何用JS实现“划词高亮”的在线笔记功能

具体使用：

// 安装

npm i web-highlighter

// 使用

import Highlighter from 'web-highlighter';

(new Highlighter()).ru