JQuery - Split the slogen after 48 characters OR after 3 dots

Question

i have this Slogan - Every big project starts with one small step ... you are welcome to take that step.
Now, i was try to slice / split this slogan to half after the 3 dots (those dots need to be visible) because i need to add a class for the second half to be extra bolder (for font-wheight). i was using this jquery code that be very very helpfull for others titles & slogans in the site:

  //Slogan Little Form 
 $(".short-form-content .slogen p").each(function() {
  var elText,
      openSpan = '<span class="lightTitle">',
      closeSpan = '</span><br/>';
  elText = $(this).text().split(" "); 
  elText.unshift(openSpan);
  elText.splice(8, 0, closeSpan);
  elText = elText.join(" ");     
  $(this).html(elText);
}); 

and i don't success to split in the right place, all the time i get like this example -
Every big project starts with one small step ... you
are welcome to take that step
the word "you" in the slogan need to be in the bold place. What i missed? OR what i need to change in the code that it will as i looking forward? OR how i split/slice after 48 characters with this code?

For yours reply i will very very appreciat

Answer 1

You can split your string on a regex which searches for ... surrounded by some number of spaces, putting that in a capturing group so that it is retained in the output array. Then you can splice in the span start tag and push the span end tag before rejoining the array into the new HTML:

$(".short-form-content .slogen p").each(function() {
  var elText,
    openSpan = '<span class="lightTitle">',
    closeSpan = '</span><br/>';
  elText = $(this).text().split(/(\s*\.\.\.\s*)/);
  elText.splice(2, 0, openSpan);
  elText.push(closeSpan);
  elText = elText.join('');
  $(this).html(elText);
});

.lightTitle {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="short-form-content">
  <div class="slogen">
    <p>Every big project starts with one small step ... you are welcome to take that step.</p>
  </div>
</div>