如何阻止 JS 代码将空格包装成跨度？

Question

我从“Detect browser wrapped lines via javascript”中找到了 JS 代码，但它会将空格包装成一个跨度。我在 WordPress 网站上使用此代码，我无法在其他任何地方解决这个问题。我尝试清理代码，但效果不佳。

有没有办法检查跨度是否为空白并删除跨度？

$(".emails .multi-items .content").each(function() {
  var $cont = $(this);

  var text_arr = $cont.text().split(' ');

  for (i = 0; i < text_arr.length; i++) {
    text_arr[i] = '<span>' + text_arr[i] + ' </span>';
  }

  $cont.html(text_arr.join(''));

  $wordSpans = $cont.find('span');

  var lineArray = [],
    lineIndex = 0,
    lineStart = true,
    lineEnd = false

  $wordSpans.each(function(idx) {
    var pos = $(this).position();
    var top = pos.top;

    if (lineStart) {
      lineArray[lineIndex] = [idx];
      lineStart = false;

    } else {
      var $next = $(this).next();

      if ($next.length) {
        if ($next.position().top > top) {
          lineArray[lineIndex].push(idx);
          lineIndex++;
          lineStart = true
        }
      } else {
        lineArray[lineIndex].push(idx);
      }
    }

  });


  //console.log( lineArray)
  for (i = 0; i < lineArray.length; i++) {
    var start = lineArray[i][0],
      end = lineArray[i][1] + 1;

    /* no end value pushed to array if only one word last line*/
    if (!end) {
      $wordSpans.eq(start).wrap('<span class="line_wrap">')
    } else {
      $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">');
    }

  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="content">
                             I’m up to something. Learning is cool, but knowing is better, and I know the key to success. Bless up. They never said winning was easy. Some people can’t handle success, I can.
I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</ul>
</div>

Answer 1

您可以检查被包装的内容是否为空。

for (i = 0; i < text_arr.length; i++) {
    if (text_arr[i].trim().length > 0) {
        text_arr[i] = '<span>' + text_arr[i] + ' </span>';
    }
}

这是编辑后的sn-p：

$(".emails .multi-items .content").each(function() {
  var $cont = $(this);

  var text_arr = $cont.text().split(' ');

  for (i = 0; i < text_arr.length; i++) {
      if (text_arr[i].trim().length > 0) {
          text_arr[i] = '<span>' + text_arr[i] + ' </span>';
      }
  }

  $cont.html(text_arr.join(''));

  $wordSpans = $cont.find('span');

  var lineArray = [],
    lineIndex = 0,
    lineStart = true,
    lineEnd = false

  $wordSpans.each(function(idx) {
    var pos = $(this).position();
    var top = pos.top;

    if (lineStart) {
      lineArray[lineIndex] = [idx];
      lineStart = false;

    } else {
      var $next = $(this).next();

      if ($next.length) {
        if ($next.position().top > top) {
          lineArray[lineIndex].push(idx);
          lineIndex++;
          lineStart = true
        }
      } else {
        lineArray[lineIndex].push(idx);
      }
    }

  });


  //console.log( lineArray)
  for (i = 0; i < lineArray.length; i++) {
    var start = lineArray[i][0],
      end = lineArray[i][1] + 1;

    /* no end value pushed to array if only one word last line*/
    if (!end) {
      $wordSpans.eq(start).wrap('<span class="line_wrap">')
    } else {
      $wordSpans.slice(start, end).wrapAll('<span class="line_wrap">');
    }

  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="emails">
<ul class="multi-items">
<div class="content">
                             I’m up to something. Learning is cool, but knowing is better, and I know the key to success. Bless up. They never said winning was easy. Some people can’t handle success, I can.
I told you all this before, when you have a swimming pool, do not use chlorine, use salt water, the healing, salt water is the healing. Put it this way, it took me twenty five years to get these plants, twenty five years of blood sweat and tears, and I’m never giving up, I’m just getting started.
</div>
</ul>
</div>