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">来“模拟”textarea。

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

DEMO：JSFiddle

Answer 3

伙计，你们快！ - 无论如何，正如我所做的那样（很有趣）也可以分享它

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

DEMO：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; }

鼠标结束时，单词会突出显示

3 个答案:

HTML

JS

DEMO：JSFiddle