當我們需要鼠標選中文本后，文本高亮。當再次將選中的文本選中后，取消高亮效果時該如何實現呢？

一、介紹 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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。