教你用純JS實現(xiàn)語雀的劃詞高亮功能
前言
前段時間公司需要實現(xiàn)一個劃詞評論的功能,但是到網(wǎng)上找了一圈發(fā)現(xiàn)劃詞評論的庫并不多,而且大部分的實現(xiàn)都是需要破壞頁面 DOM 結構的,也就是需要在頁面 DOM 結構中拆分文本包裹一個 mask 標簽,但是由于我們做的是在線富文本文檔功能,文本的內(nèi)容是可以再編輯的,如果評論破壞了 DOM 結構這樣對我們編輯的時候編輯器解析就不是很友好。找到最后發(fā)現(xiàn)語雀實現(xiàn)的劃詞評論功能是基于 canvas 實現(xiàn)的,與頁面結構完全解耦,但是由于語雀沒有開源,所以也沒辦法參考他們的代碼,只能順著他們的思路自己寫。
實現(xiàn)效果
話不多說,先看看最終實現(xiàn)的效果:

當然這個只是實現(xiàn)了核心功能的 demo,更多的交互和 UI 細節(jié)也可以基于這個功能進行實現(xiàn)。
實現(xiàn)思路
主要思路:生成一個 canvas 元素,讓 canvas 元素與需要劃詞高亮功能的文本容器元素等寬高,并且重疊在文本容器上,劃詞的時候獲取劃詞區(qū)域的文本節(jié)點相對于文本容器的位置信息,然后通過這些位置信息進行高亮背景的渲染。
雖然思路看起來很簡單,但是具體實現(xiàn)的過程還是有許多注意點的,接下來我就總結一下一些實現(xiàn)過程中的注意點和細節(jié)。
實現(xiàn)細節(jié)
1. 讓 canvas 與文本容器元素重疊
讓 canvas 與文本容器元素重疊最好的實現(xiàn)方式就是將 canvas 做為文本容器的直接子節(jié)點,然后設置文本容易為相對定位,將 canvas 設置為絕對定位,然后將 top、left、right、bottom 都設置為 0,這樣就可以時刻保證 canvas 元素與文本容器元素始終等寬高,且 canvas 重疊在文本容器上。不過這種實現(xiàn)方式也有一個問題,我們把 canvas 的層級提高了,蓋住了文本容器中的其他文本節(jié)點,這樣就沒辦法進行劃詞了,所以這時候我們需要給 canvas 再添加一個 css 屬性:pointerEvents: 'none',這樣就可以讓 canvas 不響應鼠標事件,從而讓底部文本節(jié)點可以正常劃詞了。
2. 獲取劃詞區(qū)域文本節(jié)點的位置信息
獲取劃詞區(qū)域信息需要使用 document.getSelection().getRangeAt(0) 來獲得當前劃詞區(qū)域的 range 對象,在這個對象上可以獲取到劃詞區(qū)域的起始和終止文本節(jié)點以及偏移量信息。
const {
startContainer, // 起始節(jié)點
startOffset, // 起始節(jié)點偏移量
endContainer, // 終止節(jié)點
endOffset // 終止節(jié)點偏移量
} = document.getSelection().getRangeAt(0)雖然我們拿到了節(jié)點信息,但是怎么獲得具體的位置信息呢?這時候就需要借助 Range 對象的強大功能了。
// 創(chuàng)建一個 range 對象 const range = document.createRange() // 設置需要獲取位置信息的文本節(jié)點以及偏移量 range.setStart(startContainer, startOffset) range.setEnd(startContainer, startContainer.textContent.length) // 通過 getBoundingClientRect 獲取位置信息 const rect = range.getBoundingClientRect()
通過創(chuàng)建 range 對象我們可以獲得任何一個文本節(jié)點中的任何一段文本相對與整個頁面的位置信息,然后再通過減去文本容器元素相對于整個頁面的位置信息,我們就可以得到劃詞區(qū)域文本相對與文本容器的位置信息了。
3. 獲取頭尾中間的文本節(jié)點
雖然我們通過 document.getSelection().getRangeAt(0) 獲得了劃詞頭尾節(jié)點的信息,但是頭尾中間如果有其他的文本節(jié)點我們也需要進行背景高亮,那么中間的文本節(jié)點我們該怎么獲得呢?這里我想到的辦法是從頭節(jié)點開始進行深度優(yōu)先遍歷,遍歷到尾節(jié)點為止,然后收集遍歷過程中的所有文本節(jié)點,這樣我們就得到了整個劃詞區(qū)域內(nèi)的所有文本節(jié)點,然后通過上面第 2 點的辦法我們也可以得到所有文本節(jié)點的位置信息。
// 獲取 start 到 end 深度優(yōu)先遍歷之間的所有 Text Node 節(jié)點
function getTextNodesByDfs(start: Text, end: Text) {
if (start === end) return []
const iterator = nodeDfsGenerator(start, false)
const textNodes: Text[] = []
iterator.next()
let value = iterator.next().value
while (value && value !== end) {
if (node.nodeType === 3) {
textNodes.push(value)
}
value = iterator.next().value
}
if (!value) {
return []
}
return textNodes
}
// 返回節(jié)點的深度優(yōu)先迭代器
// 對于有子節(jié)點的 Node 會遍歷到兩次,不過 Text Node 肯定沒有子節(jié)點,所以不會重復統(tǒng)計到
function * nodeDfsGenerator(node: Node, isGoBack = false): Generator<Node, void, Node> {
yield node
// isGoBack 用于判斷是否屬于子節(jié)點遍歷結束回退到父節(jié)點,如果是那么該節(jié)點不再遍歷其子節(jié)點
if (!isGoBack && node.childNodes.length > 0) {
yield * nodeDfsGenerator(node.childNodes[0], false)
} else if (node.nextSibling) {
yield * nodeDfsGenerator(node.nextSibling, false)
} else if (node.parentNode) {
yield * nodeDfsGenerator(node.parentNode, true)
}
}4. 處理跨行文本節(jié)點的位置信息
其實我們之前第 2 點獲取劃詞區(qū)域文本節(jié)點的位置信息的方案還有缺陷,對于跨行的文本節(jié)點我們?nèi)绻匀徊捎靡粋€ range 去獲取位置信息,那么得到的就是下面這種情況:

沒錯,位置信息是錯誤的,因為很明顯 range 只能是一個矩形,并沒有辦法表示我們跨行選中時的不規(guī)則圖形的位置信息。
既然一個 range 不行,那么多個呢?所以我們的解決思路就是將一個跨行的 range 拆分成多個不跨行的 range。
怎么拆呢?我使用的辦法是通過二分法的方式去找到每一行的最后一個文本節(jié)點去拆分,怎么判斷兩個字符是否在同一行采用的創(chuàng)建一個單位長度的 range,比較 range 位置信息中的 top 是否相同來進行判斷。
// 將一個跨行的 range 切割為多個不跨行的 range
function splitRange(node: Text, startOffset: number, endOffset: number): Range[] {
const range = document.createRange()
const rowTop = getCharTop(node, startOffset)
// 字符數(shù)小于兩個不用判斷是否跨行
// 頭尾高度一致說明在同一行
if ((endOffset - startOffset < 2) || rowTop === getCharTop(node, endOffset - 1)) {
range.setStart(node, startOffset)
range.setEnd(node, endOffset)
return [range]
} else {
const last = findRowLastChar(rowTop, node, startOffset, endOffset - 1)
range.setStart(node, startOffset)
range.setEnd(node, last + 1)
const others = splitRange(node, last + 1, endOffset)
return [range, ...others]
}
}
// 二分法找到 range 某一行的最右字符
function findRowLastChar(top: number, node: Text, start: number, end: number): number {
if (end - start === 1) {
return getCharTop(node, end) === top ? end : start
}
const mid = (end + start) >> 1
return getCharTop(node, mid) === top
? findRowLastChar(top, node, mid, end)
: findRowLastChar(top, node, start, mid)
}
// 獲取 range 某個字符位置的 top 值
function getCharTop(node: Text, offset: number) {
return getCharRect(node, offset).top
}
// 獲取 range 某個字符位置的 DOMRect
function getCharRect(node: Text, offset: number) {
const range = document.createRange()
range.setStart(node, offset)
range.setEnd(node, offset + 1 > node.textContent!.length ? offset : offset + 1)
return range.getBoundingClientRect()
}這樣位置信息的問題我們就徹底解決了,接下來我們就可以使用這些信息去我們的 canvas 上渲染我們想要的高亮背景效果了。
5. 劃詞信息持久化與返顯
雖然我們實現(xiàn)了高亮的功能,但是設想如果我們做的是劃詞評論功能,那么肯定還涉及到將劃詞信息保存到后端,但是我們這一切的開頭都是從系統(tǒng)提供的一個 range 對象開始的,但是 range 對象上的 startContainer 和 endContainer 是保存著 DOM 節(jié)點的引用,這肯定沒辦法序列化存儲到后端的,所以我們需要一種方式能讓我們準確的找到我們想要的文本節(jié)點。
這里一開始我是參考了語雀的實現(xiàn)方式,但是發(fā)現(xiàn)語雀中的每一個文本標簽都有一個固定的 id,這樣他們實現(xiàn)起來就很簡單了,只需要保存對應的 id 就行,但是采用這種方式就需要你對頁面的每個文本標簽都設置一個文本 id,這樣顯然與我們最初與頁面文本結構解耦的想法不符了,所以這里我采用的是類似 XPath 的方式進行儲存,對于頭尾節(jié)點,我們保存一個路徑數(shù)組,里面儲存的是從文本容器通過 childNodes 屬性遍歷下去找到該節(jié)點的信息,這樣對于任何的頁面結構我們都可以使用了。
// 獲取從文本容器到文本節(jié)點的路徑信息,用于存儲
function getPath(textNode: Text) {
const path = [0]
let parentNode = textNode.parentNode
let cur: Node = textNode
while (parentNode) {
if (cur === parentNode.firstChild) {
// this.root 為文本容器
if (parentNode === this.root) {
break
} else {
cur = parentNode
parentNode = cur.parentNode
path.unshift(0)
}
} else {
cur = cur.previousSibling!
path[0]++
}
}
return parentNode ? path : null
}
// 根據(jù)路徑信息獲取文本節(jié)點,用于返顯
getNodeByPath(path: number[]) {
// this.root 為文本容器
let node: Node = this.root
for (let i = 0; i < path.length; i++) {
if (node && node.childNodes && node.childNodes[path[i]]) {
node = node.childNodes[path[i]]
} else {
return null
}
}
return node
}源碼地址
雖然是一個小小的功能,但是其實實現(xiàn)起來也是挺復雜的,所以我將這個功能封裝成了一個工具庫:canvas-highlighter
里面也提供了使用這個庫的一些用法的在線演示,有不能實現(xiàn)的功能點大家也可以提 issue。
總結
到此這篇關于用純JS實現(xiàn)語雀的劃詞高亮功能的文章就介紹到這了,更多相關JS實現(xiàn)語雀劃詞高亮內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript使用delete刪除數(shù)組元素用法示例【數(shù)組長度不變】
這篇文章主要介紹了JavaScript使用delete刪除數(shù)組元素用法,結合實例形式分析了delete刪除數(shù)組元素的具體用法與注意事項,需要的朋友可以參考下2017-01-01
JavaScript實現(xiàn)網(wǎng)頁電子時鐘
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁電子時鐘,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-06-06
JavaScript用二分法查找數(shù)據(jù)的實例代碼
本篇文章主要介紹了JavaScript用二分法查找數(shù)據(jù)的實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06

