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