I would like to split words with comma, so I can later highlight it with mouse hover.
But I can't get it to work, I don't want to split words with - also.
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;
}
First code I have, words are all split:
$(function() {
$('.texthover').each(function() {
var $this = $(this);
$this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});
});
I tried it this way too, while I can get the words, I lose the commas in text:
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;
}
Consider the following.
$(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>This splits the text on commas, and then joins it all back with the proper <span> wrapping each word, and separating each with commas.
Result:
<span>Name</span>, <span>Name-01</span>, <span>Name-02</span>, <span>Name</span>, <span>Name</span>
replace /\b(\w+)\b/g with /([^,]+)/g
e.g.
$(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>This accounts for multiple texthover elements, spaces between commas, all without using 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>