Javascript 鼠标悬停时，文字会突出显示

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

就像我有

，在这里我可以粘贴文本或一句话，当鼠标放在一个单词上时，它会被高亮显示，如Damovisa所示：

每个单词将被包装在一个span中

这里是第二段

字：
//用跨距把单词括起来
$（'p'）。每个（函数（）{
var$this=$（this）；
$this.html（$this.text（）.replace（/\b（\w+）\b/g，“$1”）；
});
//绑定到每个跨度
$（'p span'）。悬停(
函数（）{$（'#word'）.text（$（this）.css（'background-color'，'#ffff66'）.text（）），
function（）{$（'#word'）.text（''）；$（this.css（'background-color'，''）；}
);

---

问候

如果你看看他做了什么，你会发现他把每个单词都用span标签括起来了。然后做你需要做的事

---

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

由于HTML标记，您将无法使用

textarea

来执行此操作

但是，您可以使用

来“模拟”文本区域

HTML

每个单词将被包装在一个span中。
这里是第二段。
字：

JS

//用跨距包装单词
$（'div[contentediate=true]'）。每个（函数（）{
var$this=$（this）；
$this.html（$this.text（）.replace（/\b（\w+）\b/g，“$1”）；
});
//绑定到每个跨度
$（'div[contentediate=true]span'）。悬停(
函数（）{$（'#word'）.text（$（this）.css（'background-color'，'#ffff66'）.text（）），
function（）{$（'#word'）.text（''）；$（this.css（'background-color'，''）；}
);

---

演示：伙计，你们跑得真快不管怎样，既然我做了（很有趣），不妨分享一下

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

演示：

这里可能增加了一个功能，可以粘贴/更改文本。

HTML:

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

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

---

也许这会让你走上正确的轨道——这只是一种模拟的方法，但在我看来，应该可以根据你的需要修改代码。哇，太棒了！！！只有一件事，当使用chrome时，你不能键入你的单词：）下一个字母跳到键入的字母前面。有了ie，一切都很棒！这段代码有很大的改进空间，整个contenteditable很有趣，可以通过document.exec命令获得更高级的功能。希望这显示了一些事情的开始。谢谢

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

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

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

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

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();

});

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