jQueryを使ってマウスカーソル下の文字列（英単語）を取得する方法

今調べたことのメモです。

jQueryを使ってマウスカーソル下の文字列（英単語）を取得する方法を探していましたら、「Stack Overflow」で以下のページが見つかりました。

以下のコードは上の「Stack Overflow」からのコピペを少し修正したものですが、この方法で実現可能そうです(^^♪

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQueryを使ってマウスカーソル下の文字列（英単語）を取得する方法</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // wrap words in spans
            $('p').each(function() {
                var $this = $(this);
                $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
            });

            // bind to each span
            $('p span').hover(
                function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
                function() { $('#word').text(''); $(this).css('background-color',''); }
            );
        });
    </script>
</head>
<body>
    <p>Each word will be wrapped in a span.</p>
    <p>A second paragraph here.</p>
    Word: <span id="word"></span>
</body>
</html>

My puppyのブログ

学んだ事や作っているプログラムなどについて書いています。

jQueryを使ってマウスカーソル下の文字列（英単語）を取得する方法