私はクロム拡張機能を開発しており、マウスがこの単語の上にあるときに Web ページの単語を取得する必要があります。すべての単語を特定のコンテナーに入れてから、ID で取得したくありません。たとえば、<p>The weather is very good today</p>「非常に」という単語の上にマウスを置き、js で取得したい場合 (例: alert('very'))。
質問する
261 次
1 に答える
3
この機能の概念実証をお見せしたいと思います。非常に素朴で弱いですが、適切な正規表現で可能であることを示しています。基本的に、緑色の枠の div にカーソルを合わせると、結果が表示されます。
このアプローチでは、各段落は正規表現を使用してスパンされたチャンクに分割されます。もちろん、正規表現が強力であればあるほど、より良い結果が得られます。次に、onmousemoveスパンをトリガーにしてバブリングします。スパンの内容を読むのは簡単です。
このメソッドは、おそらく触れたくない DOM 構造を変更するため、非常に煩わしいものです。ただし、プレーンなJSで動作します。より高度な (まだ簡単な) アプローチは次のようになります。
- どの段落にも触れないでください。
- マウス
onmousemoveの下に段落があることを確認します。 - 保存
clientXしてclientY. - 段落をコピーし、透明にして
position: absolute. - コピー
spanify()で物事を行います。 - document.elementFromPointを使用して、ホバリングされているスパンを見つけます。保存済み (3.)
clientXを使用clientYし、コピーの位置 (左、上) だけシフトします。 - あなたはスパンを持っています。あなたはその内容を持っています。
- DOM から段落のコピーを削除します。
このハックは、プレーンな JS でも機能します。ハッピーコーディング！;)
于 2012-12-04T23:15:06.217 に答える