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

Question

[GreenMan1899]

Есть блок шириной, допустим, 200 px. В него добавляется длинный текст одной строкой. Т.к. ширина блока ограничена, то текст может переноситься на несколько строчек.

Задача эти переносы строк «поймать» и создать отдельный массив строк так же, как строки перенеслись в браузере, независимо от того, какой длины текст и во сколько строчек он перенесется в этом блоке.

Comments

[Сергей Соколов]

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

[Артем]

зачем вам это нужно?

[GreenMan1899]

Сергей Соколов: вот наглядный пример https://codepen.io/anon/pen/dRPOdY
в тег h1 текст добавлен одной строкой. Но в блоке он разбился на 7 строк. Мне нужно получить массив из 7 строчных элементов.

соотвественно, если текст будет другой и он разобьется по-другому, чтобы массив правильно сформировался

[GreenMan1899]

Артем: мне нужно задать фон для каждой строки, а не всему тегу, ибо иначе фон будет залит сплошняком в виде прямоугольника. Чтобы эффект был как на этом сайте https://www.ei-dvery.ru/ текст "Прямоугольные двери в Москве ...".
На текст я не могу никак повлиять. Он добавляется из админки.

[Сергей Соколов]

GreenMan1899: вам важно 1:1 соответствие разбивки тому, как это получилось в браузере? Или различие приемлемо: скажем, союз «а» в браузере перенесся на следующую строку, а в массиве он ещё остался в предыдущей?

[Артем]

Там нет текста "Прямоугольные двери в Москве", там есть текст "Противопожарные двери в Москве".
И, если посмотрите в исходный код, увидите два элемента SPAN.

<span>Противопожарные двери</span>
<span>в Москве <span class="orange">от 7500 рублей</span></span>

[GreenMan1899]

Сергей Соколов: даже не знаю. Сложно представить будет ли это работать исходя из того, что я хочу сделать с фоном

[GreenMan1899]

Артем: я в курсе. Его я сверстал .Сейчас там статичный блок. Но есть аналогичный сайт, над которым я работаю. Так там такой блок будет динамически меняться.

[GreenMan1899]

Артем: по сути я и хочу каждый массив обернуть в span для задания фона

[Артем]

тогда нужно использовать моноширинный шрифт, иначе никогда не угадаете

[Сергей Соколов]

Артем: то, что вы не видите решения, не доказывает его отсутствия ; )

[Артем]

Сергей Соколов: Несомненно )

Answer 1

[Сергей Соколов]

Нетривиальный способ: добавлять исходный текст в элемент по одному слову, и смотреть за высотой элемента. Как только она скакнула – началась новая строка.

Примерно так:

var $el = $('h1');
var s = $el.text().split(/\s+/);
var i, h = {curr:0, prev:0}, parts = [], word, back=[];
while(s.length) {
  word = s.shift();
  back.push(word);
  $el.html( back.join(' '));
  h.curr = $el.height();
  if( h.curr !== h.prev) {
    parts.push([]);
    h.prev = h.curr;
  }
  parts[ parts.length - 1].push(word);
}
parts = parts.map((e,i) => '<span class="row'+i+'">' + e.join(' ') + '</span>');

$el.html(parts.join("\n"));

CodePen