CODEWITHSUNDEEP
javascripthtmljquery
Milan Katic
Milan Katic

Reputation: 13

How to separate words by commas?

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;
}

Upvotes: 1

Views: 165

Answers (5)

Samuel Liew
Samuel Liew

Reputation: 79032

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>

Upvotes: 1

Andy
Andy

Reputation: 63524

A vanilla JS method:

// Cache the element
const div = document.querySelector('.texthover');

// Grab its HTML content
const html = div.innerHTML;

// Create new HTML content from the old content
// by splitting the text, mapping over the array, and
// returning a set of spans
div.innerHTML = html.split(',').map(el => `<span>${el}</span>`);
.texthover span { color: #F2668F; transition: color .3s; }
.texthover span:hover { color: #023C4F; }
<p class="texthover">Name, Name-01, Name-02, Name, Name</p>

Upvotes: 0

Twisty
Twisty

Reputation: 30893

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>

Upvotes: 1

Ian
Ian

Reputation: 1179

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>

Upvotes: 1

dangerousmanleesanghyeon
dangerousmanleesanghyeon

Reputation: 561

    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>";
        if (i < old_html.length - 1) new_html += ", ";
        document.querySelector('.texthover').innerHTML = new_html;
    }
        .texthover span {
            color: #F2668F;
            transition: color .3s;
        }


        .texthover span:hover {
            color: #023C4F;
            transition: color .3s;
        }
                <p class="texthover"> Name, Name-01, Name-02, Name, Name</p>

Upvotes: 0

Related Questions