Как разбить и обернуть строки в промежуток в каждом разделе?

Question

Я использую " Обнаружить строки в браузере через javascript", чтобы обернуть каждую строку в <span>. Однако у меня возникает проблема, если есть несколько элементов для разделения и переноса.

Например: если у меня есть несколько разделов для разделения и переноса, например:

<div class="emails">
<ul class="multi-items">
  <div class="message-contain">
   <div id="content">
       1 - Lorem Khaled Ipsum is a major key to success. They will try to close the door on you, just open it. Watch your back, but more importantly when you get out the shower, dry your back, it’s a cold world out there. 
   </div>
</div>
<div class="message-contain">
  <div id="content">
       2 - The key to more success is to get a massage once a week, very important, major key, cloth talk. Eliptical talk. 
  </div>
</div>
</ul>
</div>

Он возьмет весь текст в .content, разделит и обернет их в <span> и продублирует их. Таким образом, пут выглядит так:

<div class="emails">
<ul class="multi-items">
  <div class="message-contain">
   <div id="content">
       <span class="line_wrap">1 - Lorem Khaled Ipsum is a major key to success.</span>
       <span class="line_wrap">They will try to close the door on you, just open it.</span>
       <span class="line_wrap">Watch your back, but more importantly when you get out the</span>
       <span class="line_wrap">shower, dry your back, it’s a cold world out there.</span> 
       <span class="line_wrap">2 - The key to more success is to get a massage once</span>
       <span class="line_wrap">a week, very important, major key, cloth talk.</span>
       <span class="line_wrap">Eliptical talk.</span> 
   </div>
</div>
<div class="message-contain">
  <div id="content">
       <span class="line_wrap">1 - Lorem Khaled Ipsum is a major key to success.</span>
       <span class="line_wrap">They will try to close the door on you, just open it.</span>
       <span class="line_wrap">Watch your back, but more importantly when you get out the</span>
       <span class="line_wrap">shower, dry your back, it’s a cold world out there.</span> 
       <span class="line_wrap">2 - The key to more success is to get a massage once</span>
       <span class="line_wrap">a week, very important, major key, cloth talk.</span>
       <span class="line_wrap">Eliptical talk.</span>
  </div>
</div>
</ul>
</div>

Я добавил 1 и 2, чтобы показать, что они дублируются. Предположим, что они находятся в разных разделах, а не во всех.

В любом случае, как разбить и обернуть каждую строку в <span> в каждом разделе и не создавать дублирующийся контент?

Рабочий пример: https://codepen.io/openbayou/pen/poJwaXv

JS Код:

$(".emails .multi-items").each(function (i) {
var $cont = $('.emails .multi-items .message-contain #content')
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">');
  }

 };
});

Answer 1

Я написал ванильную JavaScript версию этого:

function wrapNewLines(targetSelector, wrapEl = 'span', wrapClass = 'new-line') {
  const content = document.querySelectorAll(targetSelector)
  content.forEach(section => {
    let sectionWidth = section.getBoundingClientRect().width
    let words = section.innerText.split(/( )/g)
    section.innerHTML = words.map(word =>`<span>${word}</span>`).join('')
    let lines = []
    let line = []
    let lineWidth = 0
    let spans = section.querySelectorAll('span')
    spans.forEach((span, i) => {
      let spanWidth = span.getBoundingClientRect().width
      if (lineWidth + spanWidth <= sectionWidth - 4) {
        line.push(span)
        lineWidth += spanWidth
      } else {
        lines.push(line)
        line = []
        lineWidth = 0
        line.push(span)
        lineWidth += spanWidth
      }
    })
    if (line.length) lines.push(line)
    let newLines = lines
      .map(
        line =>
          `<${wrapEl} class=${wrapClass}>${line
            .map(span => span.innerText)
            .join('')}</${wrapEl}>`
      )
      .join('')
    section.innerHTML = newLines
  })
}

wrapNewLines ('.emails .multi-items .message-contain #content');

Вот суть

Answer 2

Попробуйте код ниже

$(".emails .multi-items").each(function(i) {
          var $cont = $(".message-contain #content");

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

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

          $cont.html(text_arr.join(""));
        });