一尘不染

如何使用JavaScript在光标下获取单词?

javascript

如果我有

<p> some long text </p>

在我的HTML页面上,如何得知鼠标光标位于“文本”一词上方?


阅读 265

收藏
2020-04-25

共1个答案

一尘不染

除了另外两个答案外,您还可以使用jQuery(或通常是javascript)将您的段落分成多个部分。

这样,您就无需考虑使用跨度较大的单词来输出文本。让您的JavaScript为您完成。

例如

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>

<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>

请注意,上述代码虽然有效,但会删除段落标记内的所有html。

jsFiddle示例

2020-04-25