阅读 2660

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

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

效果图

一、介绍 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); 
复制代码

关于Range的一些介绍可以看张鑫旭的这篇文章: JS Range HTML文档/文字内容选中、库及应用介绍

二、一些现成的第三方库

  1. web-highlighter

这是一个很不错的“划词高亮”功能实现第三方库,直接引用就可以,实现简单。 参考文章可以看如何用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"
}]
复制代码

持久化sources内容

  1. 分析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();
    }
 };
 
 <div 
    onMouseUp={getSelectText}
    dangerouslySetInnerHTML={{
        __html: `唧唧复唧唧,木兰当户织。不闻机杼声,唯闻女叹息。<br>                              
    问女何所思,问女何所忆。女亦无所思,女亦无所忆。昨夜见军帖,可汗大点兵,军书十二卷,卷卷有爷名。阿爷无大儿,木兰无长兄,愿为市鞍马,从此替爷征。`
    }}
 >
 </div>
复制代码

查看上面 代码demo地址

三、其他相关的内容

  1. css3中的 ::selection 选择器

有时候看到有些网站 选中内容的颜色和背景色 都不是平时看到的蓝色和白色,此时使用 ::selection 选择器 可以实现,方便让网站风格统一。

::selection CSS伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

::selection {
  background-color: cyan;
}
复制代码

下图是MDN的demo动图:

::selection选择器效果图

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

参考文献:

  1. 【MDN】window.getSelection()
  2. 【MDN】Selection
  3. 【MDN】ranges
  4. JS Range HTML文档/文字内容选中、库及应用介绍
  5. web-highlighter
  6. 如何用JS实现“划词高亮”的在线笔记功能
  7. 用js给选中文字添加样式、标注
  8. JavaScript标准Selection操作
  9. 【MDN】::selection
文章分类
前端
文章标签