JavaScript を使用して Chrome でカーソルの下に単語を表示する方法

JavaScript でカーソルの下にある単語を取得する

Web 開発では、現在カーソルがどの単語の上に置かれているかを知ると便利です。 。この記事では、特に Chrome ブラウザで動作する JavaScript ソリューションを紹介します。

関数の概要

関数 getWordAtPoint は、要素 (elem)、x 座標の 3 つのパラメータを取ります。 (x)、および y 座標 (y)。 Range オブジェクトを使用して、HTML 要素のテキスト コンテンツを反復処理し、指定された座標でカーソルの下にある単語を特定します。

実装

最初の関数入力要素がテキスト ノードかどうかを確認します。存在する場合、要素のテキスト コンテンツを選択する Range オブジェクトが作成されます。次に、ループを使用してテキスト内の各文字を段階的に選択し、getBoundingClientRect() メソッドを使用して現在の文字の外接する四角形に指定された座標が含まれているかどうかを判断します。一致するものが見つかった場合は、expand() メソッドを使用して単語全体を含むように Range オブジェクトが拡張されます。最後に、関数は単語の文字列表現を返します。

入力要素がテキスト ノードでない場合、関数は、指定された座標を含むテキスト ノードが見つかるまで、その子ノードを再帰的に繰り返します。

使用法

この関数を使用するには、目的の HTML 要素の Mousemove イベント ハンドラーにこの関数をアタッチします。例:

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

このコードは、ユーザーが指定された要素の上にマウスを移動するたびに、カーソルの下にある単語をコンソールに記録します。

以上がJavaScript を使用して Chrome でカーソルの下に単語を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。