鼠标悬停时高亮显示包含链接和标题的文本块中的单个字符

Question

我正在努力实现当鼠标悬停在字符上时，字符应该改变颜色。它应该适用于单个字符、链接、标题等。

下面的代码给出了我想要的结果，但它删除了链接和标题。

$cont = $('.words');
parts = $.map($cont.text().split(''), function(v) {
return $('<span />', {
text: v
});
});
$cont.empty().append(parts);

.words span:hover {
color: #F00
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="words">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
<a href="#link">LINK</a>
<h1>
Heading
</h1>
Stet clita kasd gubergren, no sea takimata sanctus e Lorem ipsum dolor sit amet.
</div>

JS Fiddle:http://jsfiddle.net/bvpodc6z/1/

Answer 1

只需为每个文本节点分别映射字符，这样就不会擦除DOM结构。

$('.words, .words *').contents().each(function() {
if (this.nodeType == 3)
$(this).replaceWith(escapeHTML(this.nodeValue).split('').map(c => `<span>${c}</span>`).join(''));
});
function escapeHTML(s) {
return s.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}

Answer 2

不得不对html进行一些细微的更改，即在不在标题或链接中的文本周围添加一个p标记：http://jsfiddle.net/kfbaz3gw/

$('.words').children().each( (index, el) => {
$(el).html(function (i, html) {
var chars = $.trim(html).split("");
return  chars.map(c=>'<span>'+c+'</span>').join('')
});
})