鼠标悬停时突出显示单词

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 标签中。然后做你需要做的。

你可以做到这一点的唯一方法是将它从 textarea 中取出，并将它包装在一个 span 标签中。类似于 tagit 的工作原理。

Answer 2

由于 HTML 标记，您将无法使用 textarea 执行此操作。

但是，您可以使用<div contenteditable="true"> 来“模拟”文本区域。

HTML

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

JS

// wrap words in spans
$('div[contenteditable=true]').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

// bind to each span
$('div[contenteditable=true] span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

演示：JSFiddle

Answer 3

伙计，你们很快！ - 不管怎样，我做的（很有趣）不妨分享一下

• 是的，就像 Jonsuh 回答得很好 - 这里使用 contenteditable

演示：http://jsfiddle.net/P7S3Q/1/

也许这里的补充是能够粘贴/更改文本。

HTML：

<div class="wordscontainer" contenteditable="true">
    Paste words here ...
</div>

<div id="word"></div>

JS

function setHover() {
/* we could do to unbind here before re binding */
$('.wordscontainer span').hover(
    function() { 
        $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { 
         $('#word').text(''); $(this).css('background-color',''); }
);
}

$(".wordscontainer").keyup(function() {

    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
    setHover();

});

一些用于显示/演示的 CSS

.wordscontainer { 
     padding:10px; margin:10px; 
     border:2px solid #999; min-height:400px;
 }
#word { padding:10px margin:10px; font-size:20px; }