悬停时突出显示文本块中的单个单词
在JavaScript / jQuery中，有没有一种方法可以识别文本块/段落中的单词？ 例如，假设我有以下段落：
Lorem ipsum dolor坐在amet，consectetur adipiscing elit。 Mauris怀疑Interdum fermentum。 Aenean fermentum imperdiet augue，et venenatis lectus semper vel。 在quam egestas eleifend中的Phasellus faucibus nulla。 Cras tristique augue eget libero tristique condimentum。 Mauris eget diam eget risus feugiat rutrum。 Duis placerat lorem quis augue semper porttitor。 Nullam iaculis dui feugiat erat condimentum rutrum。 Sed在accumsan直线。 Maecenas ut urna id velit posuere auctor in vel dui。 Aenean consectetur dui在leo faucibus sed feugiat dui blandit。 在accumsan diam vitae erat volutpat volutpat aliquam nunc euismod。 Vivamus viverra lorem nulla。 quisque justo quam，adipiscing坐amet auctor non，laoreet坐amet nisl。 Donec euismod lorem ac mi dictum volutpat。 Donec ligula mi，varius ac auctor at，sollicitudin id elit。 在auctor sodales ipsum nec consectetur。 Sed lacinia varius nibh vitae vulputate。
如果我将鼠标光标悬停在第一个单词“Lorem”上，我希望它变得粗体（例如）。 基本上，我只希望鼠标悬停在光标所在的文本上，并在鼠标悬停上添加CSS属性，然后在光标不再位于该单词的顶部时删除该CSS属性。
我能想到的唯一方法就是在每个单词之间添加一个<span>标签。 这是唯一的方法吗？ 有没有更有效的方法，或者jQuery的mouseover事件只能在标签中工作？ 它可以识别文本块吗？
这对于http://letteringjs.com/来说似乎是一项很好的任务
您可以将其设置为在文字障碍处为您创建跨度。
用你的例子JSFiddle：http://jsfiddle.net/3HdKH/
从他们的教程：https：//github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29
使用：
$(document).ready(function() {
$(".word_split").lettering('words');
});
这个
<p class="word_split">Don't break my heart.</p>
变为：
<p class="word_split">
<span class="word1">Don't</span>
<span class="word2">break</span>
<span class="word3">my</span>
<span class="word4">heart.</span>
</p>
然后你可以使用下面的CSS：
.word_split span:hover {
font-weight:bold;
}
$("p:contains(Lorem)").each(function(){
$(this).html($(this).text().replace(/(Lorem)/, '<span class="highlightWord">$1</span> '));
});
这从这里采取
$('span').each(function(){
$(this).html(
$(this)
.text()
.split(' ')
.map(function(x){return "<word>"+x+"</word>";})
.join(' ')
)
});
$('word').hover(function(){
$(this).css(/*highlight*/);
},function(){
$(this).css(/*de-highlight*/);
});
上一篇: Highlight an individual word within a text block on hover