使用JavaScript 檢測文本中點擊的單字

建立允許使用者透過點擊來選擇單字的JavaScript 腳本時，問題出現了：如何才能高效、優雅地實現這一點？

使用類別解析的詳細方法

一種常見但乏味的方法涉及解析整個HTML，將每個單字分割為空格，並將每個單字包裝在 元素中。然後加入一個事件監聽器來偵測對詞類的點擊，透過$(this).innerHTML取得點擊的詞。雖然這種方法有效，但其性能和美觀性還有很多不足之處。

無需類解析的最佳化解決方案

為了更有效率、更優雅的解決方案，請考慮以下因素：

第1 步：擷取選擇

使用window.getSelection() 擷取使用者的選擇。

第 2 步：識別單字邊界

迭代選擇範圍以確定點擊的單字的起點和終點，避免空格。

第 3 步：檢索單擊的單字

將選擇範圍內辨識出的字元組合起來形成單擊的單字。

範例實作

以下JavaScript 程式碼提供了此解決方案的實際實作：

$(".clickable").click(function (e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(' ') != 0) {
    range.setStart(node, (range.startOffset - 1));
  }
  range.setStart(node, range.startOffset   1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset   1);
  } while (
    range.toString().indexOf(' ') == -1 &&
    range.toString().trim() != ''
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});