利用Javascript獲取選擇文本所在的句子詳解

更新時間：2017年12月03日 14:23:22 作者：CRIMX

這篇文章主要給大家愛介紹了關于利用Javascript獲取選擇文本所在的句子的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。

前言

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

原理分析

獲取選擇文本

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

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

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

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

當然不會這么簡單哈stuck_out_tongue。

強調一下

一般情況下，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é)點來獲取完整的句子。

遍歷到哪？

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

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é)點獲取首尾補上。

實現(xiàn)

選擇文本

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

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

獲取首部

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

然后開始補全在 anchorNode 之前的兄弟節(jié)點，最后補全在 anchorNode 父元素之前的兄弟元素。注意后面是元素，這樣可以減少遍歷的次數(shù)，而且考慮到一些被隱藏的內容不需要獲取，用 innerText 而不是 textContent 屬性。

let sentenceHead = ''
const anchorNode = selection.anchorNode
if (anchorNode.nodeType === Node.TEXT_NODE) {
 let leadingText = anchorNode.textContent.slice(0, selection.anchorOffset)
 for (let node = anchorNode.previousSibling; node; node = node.previousSibling) {
 if (node.nodeType === Node.TEXT_NODE) {
 leadingText = node.textContent + leadingText
 } else if (node.nodeType === Node.ELEMENT_NODE) {
 leadingText = node.innerText + leadingText
 }
 }

 for (
 let element = anchorNode.parentElement;
 element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
 element = element.parentElement
 ) {
 for (let el = element.previousElementSibling; el; el = el.previousElementSibling) {
 leadingText = el.innerText + leadingText
 }
 }

 sentenceHead = (leadingText.match(sentenceHeadTester) || [''])[0]
}

最后從提取句子首部用的正則是這個

// match head   a.b is ok chars that ends a sentence
const sentenceHeadTester = /((\.(?![ .]))|[^.?!。？！…\r\n])+$/

前面的 ((\.(?![ .])) 主要是為了跳過 a.b 這樣的特別是在技術文章中常見的寫法。

獲取尾部

跟首部同理，換成往后遍歷。最后的正則保留了標點符號

// match tail       for "..."
const sentenceTailTester = /^((\.(?![ .]))|[^.?!。？！…\r\n])+(.)\3{0,2}/

壓縮換行

拼湊完句子之后壓縮多個換行為一個空白行，以及刪除每行開頭結尾的空白符

return (sentenceHead + selectedText + sentenceTail)
 .replace(/(^\s+)|(\s+$)/gm, '\n') // allow one empty line & trim each line
 .replace(/(^\s+)|(\s+$)/g, '') // remove heading or tailing \n

完整代碼

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'
])

/**
* @returns {string}
*/
export function getSelectionSentence () {
 const selection = window.getSelection()
 const selectedText = selection.toString()
 if (!selectedText.trim()) { return '' }

 var sentenceHead = ''
 var sentenceTail = ''

 const anchorNode = selection.anchorNode
 if (anchorNode.nodeType === Node.TEXT_NODE) {
 let leadingText = anchorNode.textContent.slice(0, selection.anchorOffset)
 for (let node = anchorNode.previousSibling; node; node = node.previousSibling) {
 if (node.nodeType === Node.TEXT_NODE) {
 leadingText = node.textContent + leadingText
 } else if (node.nodeType === Node.ELEMENT_NODE) {
 leadingText = node.innerText + leadingText
 }
 }

 for (
 let element = anchorNode.parentElement;
 element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
 element = element.parentElement
 ) {
 for (let el = element.previousElementSibling; el; el = el.previousElementSibling) {
 leadingText = el.innerText + leadingText
 }
 }

 sentenceHead = (leadingText.match(sentenceHeadTester) || [''])[0]
 }

 const focusNode = selection.focusNode
 if (selection.focusNode.nodeType === Node.TEXT_NODE) {
 let tailingText = selection.focusNode.textContent.slice(selection.focusOffset)
 for (let node = focusNode.nextSibling; node; node = node.nextSibling) {
 if (node.nodeType === Node.TEXT_NODE) {
 tailingText += node.textContent
 } else if (node.nodeType === Node.ELEMENT_NODE) {
 tailingText += node.innerText
 }
 }

 for (
 let element = focusNode.parentElement;
 element && INLINE_TAGS.has(element.tagName.toLowerCase()) && element !== document.body;
 element = element.parentElement
 ) {
 for (let el = element.nextElementSibling; el; el = el.nextElementSibling) {
 tailingText += el.innerText
 }
 }

 sentenceTail = (tailingText.match(sentenceTailTester) || [''])[0]
 }

 return (sentenceHead + selectedText + sentenceTail)
 .replace(/(^\s+)|(\s+$)/gm, '\n') // allow one empty line & trim each line
 .replace(/(^\s+)|(\s+$)/g, '') // remove heading or tailing \n
}

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: