ホームページ > ウェブフロントエンド > jsチュートリアル > クラス解析を行わずに Javascript のテキスト内の Word クリックを検出する方法

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

Linda Hamilton
リリース: 2024-10-27 09:35:03
オリジナル
911 人が閲覧しました

How to Detect Word Clicks Within Text in Javascript Without Class Parsing?

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート