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

Posted 2023-05-09

【中文标题】忽略仅包含空格的数组元素

【英文标题】：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

【参考方案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 个语句。在进行拆分之前，我们将检查本段中除了空格之外是否还有其他内容。

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