1

I have many comma separated strings, each of which consists of a list of tags, and I want to style each tag inside a box (see here).

I converted each comma separated string ("p") into an array, then wrapped <span> tags around each value in the array, so I could style it with CSS, which worked great.

But whitespace strings are also getting wrapped in span tags which I do not want, I want to ignore those (or hide them).

How do I ignore those occurrences of "p" which contain only whitespace? The answers here and here but didn't work for me.

HTML:

<p>Skill 1, Skill 2, Skill 3</p>
<p>Skill 1</p>
<p> </p>

Javascript:

  $("p").each(function() {
    var words = $(this).text().split(", ");
    var total = words.length;
    $(this).empty();
    for (index = 0; index < total; index++) {
      $(this).append($("<span class = 'tag' > ").text(words[index]));
    }
  })

CSS:

.tag {
  background-color: lightgray;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
}

JS Fiddle

3 Answers3

0

Just check to see if the trimmed text is truthy first. Also make sure not to implicitly create global variables, always declare variables with const (or let or var) before using them, otherwise errors will be thrown in strict mode:

if (words[index].trim()) {
  $(this).append($("<span class = 'tag' > ").text(words[index]));
}


// Converts comma separated string into tags 
function convertToTags(s) {

  $(s).each(function() {
    var words = $(this).text().split(", ");
    var total = words.length;
    $(this).empty();
    for (let index = 0; index < total; index++) {
      if (words[index].trim()) {
        $(this).append($("<span class = 'tag' > ").text(words[index]));
      }
    }
  })


}


// Calls the function on document ready
$(document).ready(function() {
  convertToTags("p");
});
.tag {
  background-color: lightgray;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This, is, a, test</p>
<p>This</p>
<p> </p>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
0

You need to apply your function only to the relevant elements.
In the following example I've used this condition:

$(this).text().trim().length > 0


$("p")
  .each(function() {
    const text = $(this).text().trim();
    // This condition will make sure that "empty" p elements won't be affected
    if (text.length > 0) {
      var words = $(this).text().split(", ");
      var total = words.length;
      $(this).empty();
      for (index = 0; index < total; index++) {
        $(this).append($("<span class = 'tag' > ").text(words[index]));
      }
    }
  })
.tag {
  background-color: lightgray;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Skill 1, Skill 2, Skill 3 </p>
<p>Skill 1</p>
<p> </p>
GalAbra
  • 5,048
  • 4
  • 23
  • 42
0
function convertToTags(s) {

  $("p").each(function() {
    var text = $(this).text();
    if(!text.replace(/ /g, '')){
        $(this).remove();
        return;
    }
    var words = text.split(", ");
    var total = words.length;
    $(this).empty();
    for (index = 0; index < total; index++) {
      $(this).append($("<span class = 'tag' > ").text(words[index]));
    }
  })


}

Magic lies in the first 2 statements within .each function. Before doing the split, we will check if there is anything else in this paragraph other than whitespace(s).

If not, remove this paragraph and start the next iteration.

Taha
  • 135
  • 7