當(dāng)我們需要鼠標(biāo)選中文本后，文本高亮。當(dāng)再次將選中的文本選中后，取消高亮效果時該如何實現(xiàn)呢？

一、介紹 window.getSelection

獲取鼠標(biāo)選中內(nèi)容，主要是利用了window.getSelection()這個API。返回一個Selection對象，表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置。

Selection 對象所對應(yīng)的是用戶所選擇的ranges(區(qū)域)，俗稱拖藍(lán)。默認(rèn)情況下，該函數(shù)只針對一個區(qū)域，我們可以這樣使用這個函數(shù)：

var selObj = window.getSelection();

var range = selObj.getRangeAt(0);

// selObj 被賦予一個 Selection對象

// range 被賦予一個 Range 對象

復(fù)制代碼

調(diào)用Selection.toString() 方法會返回被選中區(qū)域中的純文本。要求變量為字符串的函數(shù)會自動對對象進(jìn)行該處理，例如：

var selObj = window.getSelection();

window.alert(selObj);

復(fù)制代碼

二、一些現(xiàn)成的第三方庫

這是一個很不錯的“劃詞高亮”功能實現(xiàn)第三方庫，直接引用就可以，實現(xiàn)簡單。

參考文章可以看如何用JS實現(xiàn)“劃詞高亮”的在線筆記功能

具體使用：

// 安裝

npm i web-highlighter

// 使用

import Highlighter from 'web-highlighter';

(new Highlighter()).run();

復(fù)制代碼

高亮區(qū)域持久化：

import Highlighter from 'web-highlighter';

// 1. 實例化

const highlighter = new Highlighter();

// 2. 從后端(getRemoteData)獲取高亮信息，還原至網(wǎng)頁

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

// 3. 監(jiān)聽高亮筆記創(chuàng)建事件，并將信息存至后端

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

// 4. 開啟自動劃詞高亮

highlighter.run();

復(fù)制代碼

持久化中監(jiān)聽筆記創(chuàng)建事件獲取的sources是一個數(shù)組，數(shù)組元素是對象，內(nèi)容如下圖：

//包含了 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"

}]

復(fù)制代碼

分析ueditor與復(fù)制

參考該文章用js給選中文字添加樣式、標(biāo)注，在上GitHub兩三下拿到ueditor源碼，開始讀源碼分析代碼。除去一些不需要的代碼和兼容性處理后，拿到了五個文件：

browser.js (瀏覽器版本判斷，用于做兼容性處理)

domUtils.js (dom操作)

dtd.js (節(jié)點的類型與元素判斷)

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

}

// 如果選中父節(jié)點包含 red-color 的class 則移除帶 red-color 的 span標(biāo)簽，否則則添加span標(biāo)簽進(jìn)行選中

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: `唧唧復(fù)唧唧，木蘭當(dāng)戶織。不聞機杼聲，唯聞女嘆息。

問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。`

}}

>

復(fù)制代碼

以上是對選中文本高亮效果總結(jié)。

參考文獻(xiàn)：

關(guān)于找一找教程網(wǎng)

本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。

本站提供了軟件編程、網(wǎng)站開發(fā)技術(shù)、服務(wù)器運維、人工智能等等IT技術(shù)文章，希望廣大程序員努力學(xué)習(xí)，讓我們用科技改變世界。

[鼠標(biāo)選中文本劃詞高亮、再次選中劃詞取消高亮效果]http://www.zyiz.net/tech/detail-121373.html

總結(jié)

以上是生活随笔為你收集整理的java鼠标进入高亮效果_鼠标选中文本划词高亮、再次选中划词取消高亮效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。