Estoy tratando de lograr que al pasar el mouse sobre un personaje, el personaje cambie de color. Debería funcionar en caracteres individuales, enlaces, encabezados, etc.
Mi siguiente código me da el resultado que quiero, pero elimina los enlaces y los encabezados.
$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>Violín JS: http://jsfiddle.net/bvpodc6z/1/
Tuve que hacer algunos cambios leves en html, a saber, agregar una etiqueta ap alrededor del texto que no está en el encabezado o el enlace: 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('') }); })Simplemente asigne los caracteres por separado para cada nodo de texto para que no borre su estructura 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, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); }