前言

最近收到一個 issue 期望能在劃詞的時候同時保存單詞的上下文和來源網(wǎng)址。這個功能其實很久之前就想過，但感覺不好實現(xiàn)一直拖延沒做。真做完發(fā)現(xiàn)其實并不復(fù)雜，完整代碼在這里，或者繼續(xù)往下閱讀分析。話不多說了，來一起看看詳細(xì)的介紹吧。

原理分析

獲取選擇文本

通過 window.getSelection() 即可獲得一個 Selection 對象，再利用 .toString() 即可獲得選擇的文本。

錨節(jié)點與焦節(jié)點

在 Selection 對象中還保存了兩個重要信息，anchorNode 和 focusNode，分別代表選擇產(chǎn)生那一刻的節(jié)點和選擇結(jié)束時的節(jié)點，而 anchorOffset 和 focusOffset 則保存了選擇在這兩個節(jié)點里的偏移值。

這時你可能馬上就想到第一個方案：這不就好辦了么，有了首尾節(jié)點和偏移，就可以獲取句子的頭部和尾部，再把選擇文本作為中間，整個句子不就出來了么。

當(dāng)然不會這么簡單哈stuck_out_tongue。

強(qiáng)調(diào)一下

一般情況下，anchorNode 和 focusNode 都是 Text 節(jié)點（而且因為這里處理的是文本，所以其它情況也會直接忽略），可以考慮這種情況：

<strong>Saladict</strong> is awesome!

如果選擇的是“awesome”，那么 anchorNode 和 focusNode 都是 is awesome!，所以取不到前面的 “Saladict”。

另外還有嵌套的情況，也是同樣的問題。

Saladict is <strong><a href="#" rel="external nofollow" >awesome</a></strong>!

所以我們還需要遍歷兄弟和父節(jié)點來獲取完整的句子。

遍歷到哪？

于是接下就是解決遍歷邊界的問題了。遍歷到什么地方為止呢？我的判斷標(biāo)準(zhǔn)是：跳過 inline-level 元素，遇到 block-level 元素為止。而判斷一個元素是 inline-level 還是 block-level 最準(zhǔn)確的方式應(yīng)該是用 window.getComputedStyle() 。但我認(rèn)為這么做太重了，也不需要嚴(yán)格的準(zhǔn)確性，所以用了常見的 inline 標(biāo)簽來判斷。

const INLINE_TAGS = new Set([ // Inline text semantics 'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr'])

原理總結(jié)

句子由三塊組成，選擇文本作為中間，然后遍歷兄弟和父節(jié)點獲取首尾補(bǔ)上。

實現(xiàn)

選擇文本

先獲取文本，如果沒有則退出

const selection = window.getSelection()const selectedText = selection.toString()if (!selectedText.trim()) { return '' }

獲取首部

對于 anchorNode 只考慮 Text 節(jié)點，通過 anchorOffset 獲取選擇在 anchorNode 的前半段內(nèi)容。