Me gustaría dividir las palabras con comas, para luego poder resaltarlas con el mouse. Pero no puedo hacer que funcione, no quiero dividir las palabras con - también.
HTML
<p class="texthover"> Name, Name-01, Name-02, Name, Name</p>CSS
.texthover span { color: #F2668F; transition: color .3s; } .texthover span:hover { color: #023C4F; transition: color .3s; }El primer código que tengo, las palabras están todas divididas:
$(function() { $('.texthover').each(function() { var $this = $(this); $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>")); }); });También lo intenté de esta manera, aunque puedo obtener las palabras, pierdo las comas en el texto:
var text = document.querySelector('.texthover').innerHTML; var old_html = text.split(","); var new_html = ""; for (var i = 0; i < old_html.length; i++) { new_html = new_html + " <span class='text-"+i+"'>" + old_html[i] + " </span>"; document.querySelector('.texthover').innerHTML = new_html; }Considera lo siguiente.
$(function() { $(".texthover").each(function(i, el) { $(el).html("<span>" + $(el).text().split(", ").join("</span>, <span>")); }); }); .texthover span { color: #F2668F; transition: color .3s; } .texthover span:hover { color: #023C4F; transition: color .3s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="texthover">Name, Name-01, Name-02, Name, Name</p> Esto divide el texto en comas, y luego lo vuelve a unir con el <span> adecuado envolviendo cada palabra y separándolas con comas.
Resultado:
<span>Name</span>, <span>Name-01</span>, <span>Name-02</span>, <span>Name</span>, <span>Name</span>reemplace /\b(\w+)\b/g con /([^,]+)/g
p.ej
$(function() { $('.texthover').each(function() { var $this = $(this); $this.html($this.text().replace(/([^,]+)/g, "<span>$1</span>")); }); }); .texthover span { color: #F2668F; transition: color .3s; } .texthover span:hover { color: #023C4F; transition: color .3s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p class="texthover"> Name, Name-01, Name-02, Name, Name</p>Esto da cuenta de múltiples elementos texthover , espacios entre comas, todo sin usar jQuery:
document.querySelectorAll('.texthover').forEach(el => { el.innerHTML = el.innerText.trim().split(/\s*,\s*/).map(val => `<span>${val}</span>`).join(', '); }); .texthover span { color: #F2668F; transition: color .3s; } .texthover span:hover { color: #023C4F; } <p class="texthover"> Name, Name-01, Name-02, Name-03, Name-04</p> <p class="texthover"> Name-05 , Name-06 , Name-07 , Name-08 , Name-09 </p>