クラス解析を行わずに Javascript のテキスト内の Word クリックを検出する方法

クラス解析を行わずにテキスト内の単語のクリックを検出する

JavaScript では、テキスト内の単語のクリックを正確に検出することが困難な場合があります。一般的ですが非効率なアプローチには、HTML ドキュメント全体をクラス解析し、 を追加することが含まれます。

ただし、より洗練されたソリューションが利用できるようになりました。

ウィンドウ選択 API を使用する

ウィンドウ選択 API は、現在選択されているテキストを取得する方法を提供します。この API を活用すると、広範な HTML 解析を必要とせずにクリック検出メカニズムを実装できます。

JavaScript スニペットは次のとおりです:

<code class="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);
});</code>

このスニペットでは、クリック リスナーを使用してアクティブ化します。選択 API。選択範囲の開始位置と終了位置を分析することで、クリックされた単語を抽出できます。

ブラウザ API に関する考慮事項

このソリューションは Webkit、Mozilla、IE9 と互換性があります。 。ブラウザ拡張機能として使用する場合は、基礎となる API がターゲット ブラウザでサポートされていることを確認してください。

代替案の強調表示

代替案として、クリックの代わりにテキストを強調表示する機能を使用すると、より簡単なユーザー エクスペリエンスが提供される可能性があります。

以上がクラス解析を行わずに Javascript のテキスト内の Word クリックを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。