在hover时突出显示文本块中的单个单词

在javascript / jQuery中，有没有办法识别文本块/段落中的单词？ 例如，假设我有以下段落：

Lorem ipsum dolor坐着，精神上的精神。 Mauris suscipit 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。 Maecenas ut urna id velit posuere auctor in vel dui。 Aeoan 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 sit 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。

如果我将鼠标光标hover在第一个单词“Lorem”上，我希望它变为粗体（例如）。 基本上，我只希望光标所在的文本在鼠标hover时添加一个CSS属性，然后在光标不再位于该单词之上时删除该CSS属性。

我能想到的唯一方法是在每个单词之间添加一个标签。 这是唯一的方法吗？ 是否有更有效的方法，或jQuery的鼠标hover事件只能在标签内工作？ 它可以用于识别文本块吗？

Answer 1

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

这个

 
Don't break my heart. 

变为：

 
 Don't break my heart.  

然后你可以使用以下CSS：

 .word_split span:hover { font-weight:bold; } 

Answer 2

 $("p:contains(Lorem)").each(function(){ $(this).html($(this).text().replace(/(Lorem)/, '$1 ')); }); 

这取自这里

Answer 3

 $('span').each(function(){ $(this).html( $(this) .text() .split(' ') .map(function(x){return ""+x+"";}) .join(' ') ) }); $('word').hover(function(){ $(this).css(/*highlight*/); },function(){ $(this).css(/*de-highlight*/); }); 

Answer 4

唯一可以做到这一点的方法是使用跨度（如您所述）。 Javascript将文本块视为一个元素，除非它被破坏。 你只能对元素做事。 由于所有文本流和剂量都有一个位置，因此您无法精确定位单个单词的位置以查看其何时hover。 除非你的文字很大，否则一些额外的跨度rest不应该是性能的大问题。

Answer 5

这是我能想到的唯一方法。 您可以使用鼠标事件和鼠标位置（尝试找出该位置的单词）来执行某些操作，但这不是最有趣的尝试。 您可能需要在文字周围添加一些标记作为参考点。

如果您打算将其分解为我建议使用单个字符标记的元素，例如

。

另一个中间选项是仅对容器上的over事件，并且只有在用户hover时才将文本分解为子元素。 就像是：

 $('#container').live('mouseenter',function(){ var jThis = $(this); var text = jThis.text(); jThis.attr('original',text); text = text.split(' '); var out_text = ''; for(var nI = 0; nI < text.length; nI++){ out_text += "
"+text[nI]+"
"; } jThis.html(out_text); }); $('#container p').live('mouseenter',function(){ $(this).addClass('highlight'); }); 

您还需要添加out事件。

Answer 6

这是我使用的一种技术，它在父元素中的所有单词周围包装span标记，以便在hover时突出显示它们：

 const parentElement = document.getElementById('parent'); parentElement.onmouseover = e => { e.target.innerHTML = e.target.innerText.replace(/([\w]+)/g, '$1'); }; 

 p#parent span:hover { background: yellow; cursor: pointer; } 

 
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.