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