javascript - 鼠标悬停时单词高亮显示

Question

我需要一些帮助。如何在我自己的粘贴文本中突出显示一个词。

就像我有 <textarea></textarea> ，我可以在其中粘贴文本或只粘贴一个句子，当鼠标悬停在一个单词上时，Damovisa 会像此处一样突出显示它:http://jsfiddle.net/5gyRx/

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


// 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',''); }
);

问候

Answer 1

如果您看一下他的所作所为，您会发现他将每个单词都包装在一个 span 标签中。然后做任何你需要做的事。

唯一可以做到这一点的方法是将其从文本区域中取出，并将其包裹在一个 span 标签中。类似于 tagit 的工作方式。