当我们需要鼠标选中文本后,文本高亮。当再次将选中的文本选中后,取消高亮效果时该如何实现呢?
一、介绍 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