How to separate words by commas?-CodePudding

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

CodePudding user response：

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 >Name, Name-01, Name-02, Name, Name</p>

This Splits the text, based on Coma, and then joins it all back with the proper Span wrapping and separating coma.

Result:

<span>Name</span>, <span>Name-01</span>, <span>Name-02</span>, <span>Name</span>, <span>Name</span>

CodePudding user response：

    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 > Name, Name-01, Name-02, Name, Name</p>

CodePudding user response：

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 > Name, Name-01, Name-02, Name, Name</p>