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 中国語 Web サイトの他の関連記事を参照してください。