如何使用 JavaScript 高效檢測文字中點擊的單字？

使用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);
});

以上是如何使用 JavaScript 高效檢測文字中點擊的單字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！