忽略仅包含空格的数组元素答案

【问题标题】：Ignore Whitespace-only Array Elements忽略仅包含空格的数组元素
【发布时间】：2020-07-23 23:49:51
【问题描述】：

我有许多逗号分隔的字符串，每个字符串都包含一个标签列表，我想在一个框内设置每个标签的样式 (see here)。

我将每个逗号分隔的字符串 ("p") 转换为一个数组，然后将 <span> 标签包裹在数组中的每个值周围，这样我就可以使用 CSS 对其进行样式设置，效果很好。

但是空白字符串也被包裹在我确实不想要的 span 标签中，我想忽略这些（或隐藏它们）。

如何忽略那些只包含空格的“p”？答案here 和here 但对我不起作用。

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

【问题讨论】：

标签： javascript jquery css arrays

【解决方案1】：

首先检查修剪的文本是否真实。还要确保不隐式创建全局变量，在使用变量之前总是用const（或let或var）声明变量，否则在严格模式下会抛出错误：

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>

【讨论】：

【解决方案2】：

您只需要将函数应用于相关元素。
在以下示例中，我使用了此条件：

$(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>

【讨论】：

【解决方案3】：

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


}

神奇之处在于 .each 函数中的前 2 个语句。在进行拆分之前，我们将检查本段中除了空格之外是否还有其他内容。

如果不是，请删除此段落并开始下一次迭代。

【讨论】：