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()).run();

复制代码

高亮区域持久化：

import Highlighter from 'web-highlighter';

// 1. 实例化

const highlighter = new Highlighter();

// 2. 从后端(getRemoteData)获取高亮信息，还原至网页

getRemoteData().then(s => highlighter.fromStore(s.startMeta, s.endMeta, s.id, s.text));

// 3. 监听高亮笔记创建事件，并将信息存至后端

highlighter.on(Highlighter.event.CREATE, ({sources}) => save(sources));

// 4. 开启自动划词高亮

highlighter.run();

复制代码

持久化中监听笔记创建事件获取的sources是一个数组，数组元素是对象，内容如下图：

//包含了 startMeta、endMeta、text和id

[{

startMeta: {parentTagName: "A", parentIndex: 6, textOffset: 2}

endMeta: {parentTagName: "H2", parentIndex: 0, textOffset: 2}

text: "中文↵Ba"

id: "91031887-238c-4118-a5b7-9def992b9479"

}]

复制代码

分析ueditor与复制

参考该文章用js给选中文字添加样式、标注，在上GitHub两三下拿到ueditor源码，开始读源码分析代码。除去一些不需要的代码和兼容性处理后，拿到了五个文件：

browser.js (浏览器版本判断，用于做兼容性处理)

domUtils.js (dom操作)

dtd.js (节点的类型与元素判断)

Range.js (封装的选中范围对象)

utils.js (工具类)

原作者 代码demo地址, 下面用到部分的与该博客作者略有不同。

主要使用到的代码：

import Range from "./utils/Range";

import domUtils from "./utils/domUtils.js";

const getSelectText = () => {

var getRange = () => {

var me = window;

var range = new Range(me.document);

var sel = window.getSelection();

if (sel && sel.rangeCount) {

var firstRange = sel.getRangeAt(0);

var lastRange = sel.getRangeAt(sel.rangeCount - 1);

range.setStart(firstRange.startContainer, firstRange.startOffset)

.setEnd(lastRange.endContainer, lastRange.endOffset);

}

return range

}

// 如果选中父节点包含 red-color 的class 则移除带 red-color 的 span标签，否则则添加span标签进行选中

if (domUtils.hasClass(range.startContainer.parentNode, "red-color")) {

range.removeInlineStyle("span", "red-color");

} else {

range.applyInlineStyle("span", {

class: "red-color"

});

range.select();

}

};

onMouseUp={getSelectText}

dangerouslySetInnerHTML={{

__html: `唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。

问女何所思，问女何所忆。女亦无所思，女亦无所忆。昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。`

}}

>

复制代码

以上是对选中文本高亮效果总结。

参考文献：

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[鼠标选中文本划词高亮、再次选中划词取消高亮效果]http://www.zyiz.net/tech/detail-121373.html