摘要：原理分析獲取選擇文本通過即可獲得一個對象，再利用即可獲得選擇的文本。所以我們還需要遍歷兄弟和父節點來獲取完整的句子。實現選擇文本先獲取文本，如果沒有則退出獲取首部對于只考慮節點，通過獲取選擇在的前半段內容。

最近收到一個 issue 期望能在劃詞的時候同時保存單詞的上下文和來源網址。這個功能其實很久之前就想過，但感覺不好實現一直拖延沒做。真做完發現其實并不復雜，完整代碼在這里，或者繼續往下閱讀分析。

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

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

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

當然不會這么簡單哈。

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

Saladict is awesome!

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

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

Saladict is awesome!

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

于是接下就是解決遍歷邊界的問題了。遍歷到什么地方為止呢？我的判斷標準是：跳過 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"
])

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

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

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

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

然后開始補全在 anchorNode 之前的兄弟節點，最后補全在 anchorNode 父元素之前的兄弟元素。注意后面是元素，這樣可以減少遍歷的次數，而且考慮到一些被隱藏的內容不需要獲取，用 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 = /((.(?![ .]))|[^.?!。？！…
])+$/

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

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

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

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

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

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, "
") // allow one empty line & trim each line
    .replace(/(^s+)|(s+$)/g, "") // remove heading or tailing 

}

【完】