Skip to content
Advertisement

How to stop JS code from wrapping white spaces into a span?

I found JS code from “Detect browser wrapped lines via javascript” but it will wrap white-spaces into a span. I’m using this code on a WordPress site and I cannot reciprocate the problem anywhere else. I tried to sanitize the code but that didn’t work as well.

Is there a way to check if a span is blank and remove the span?

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

Advertisement

Answer

You can check if the content that’s being wrapped is not empty.

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

Here’s the edited snippet:

$(".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>
User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement