Как разбить текст на строки JS?

Question

[be_a_man]

Имеется сплошной текст. Как обернуть каждую строку на фронте в span?


UPD: обернуть нужно строки как их видит юзер на экране.

Comments

[Stalker_RED]

А что у вас является разделителем строк? Как определить, где закончилась одна строка, и началась другая? У вас в примере https://jsfiddle.net/roxnserc/ одна строка же?

[be_a_man]

Stalker_RED, одна, в том и сложность

[Stalker_RED]

be_a_man, в чем сложность ее обернуть?
p.innerHTML = '<span>'+p.textContent+'</span>'

[be_a_man]

Stalker_RED, в том что нужно обернуть каждую получившуюся строку на фронте, чтобы на них повесить анимации

[Stalker_RED]

be_a_man, дык я обернул же.

[be_a_man]

Stalker_RED, дык всю строку же), а мне разбить на строки как видит юсер на экране

[Stalker_RED]

be_a_man, я там даже картинку приложил. Там одна строка.

Сложно нормально задачу сформулировать, да? Даже когда уточняющие вопросы задают.

[be_a_man]

Stalker_RED, Сорян, ниже люди поняли. Как бы вы сформулировали задачу?

[Stalker_RED]

be_a_man, кто из них понял? Один делит по "\n", которых у вас нет. Другой по 37 символов (и хз почему по 37), третий вообще топит за css.

Похоже, что я понял даже получше чем они, и задал уточняющие вопросы.
Пока что я не получил на них ответ. Предлагаете писать код наугад, в надежде угадать, что именно вы там затеяли, как те трое? Я пас.

[devalone]

Stalker_RED, Эмм, а что непонятного в задаче? Есть текст в блоке определённой ширины, поскольку ширина у клиентов разная, строки переносятся у каждого по своему, т.е. у одного будет 2 строки шириной 200px, у другого 4 шириной 100px и ТСу нужно для первого клиента сделать 2 span'а, для второго - 4.

[Stalker_RED]

devalone, нет, ну сейчас то я это понимаю. И даже нашел два решения. Но выяснил я это собирая подсказки по двум десяткам комментариев.

Answer 1

[devalone]

Могу предложить такой костыль: https://jsfiddle.net/h392bc1y/

Comments

[be_a_man]

Благодарю, а не поможете с таким вариантом? https://jsfiddle.net/ynxkpz5v/3/

[devalone]

be_a_man, как-то так: https://jsfiddle.net/a5po4mf0/1/

[be_a_man]

devalone, Спасибо!

Answer 2

[Stalker_RED]

Код страшненький, но работает: https://jsfiddle.net/Stalk/mcv6gsmt/2
Клонируем родительский элемент, копируем его контент, замеряем высоту одной строки.
Добавляем в него текст, пока высота не изменится (значит сработал перенос).
Запоминаем строку, и повторяем, пока контент не кончится.
(можно значительно ускорить, если добавлять не посимвольно, а по словам).

Еще есть вариант с canvas measureText(), возможно он будет быстрее работать.

Comments

[be_a_man]

И вам спасибо! Я бы даже не догадался фильтровать по высоте, а не ширине.

[be_a_man]

Только еще стоит добавить
tmp.style.width = el.offsetWidth + 'px'

[Stalker_RED]

be_a_man, но ведь при клонировании и так все стили копируются? Я только сдвигаю его влево, чтобы не появлялся на экране. С невидимым элементом не сработает - высота будет 0.

[be_a_man]

Stalker_RED, попробуйте уменьшить ширину и выполнить код.

[Stalker_RED]

be_a_man, понял, там же не width а max-width.
Тогда да, есть смысл добавить.

Answer 3

[Петр]

Как-то так:

var p = $('p');
var lines = p.html().split("\n");
var formated = [];
$.each(lines, function(i, v){  formated.push("<span>{1}</span>".replace('{1}', v));  });
p.html(formated.join(''));

Comments

[be_a_man]

Не совсем https://jsfiddle.net/roxnserc/

Answer 4

[Алексей]

могу предложить только регулярку, если канеш там точно нет символов новой строки
/(.{0,37}[\s])/gi

Comments

[be_a_man]

С регуляркой плохо дружу, 0,37 это что такое?

[Алексей]

be_a_man, длина строки. Если ширина фиксированая, то можно примерно подобрать width/(font-size/2)

[Stalker_RED]

десять символов "o": oooooooooo
десять символов "i": iiiiiiiiii
десять символов "W": WWWWWWWWWW

Отличный план.

[Алексей]

Stalker_RED, конкретеней ?

[Stalker_RED]

Алексей, пример выше как-бы намекает нам, что несколько разных строк по 37 символов могут иметь совершенно разную длину.
Моноширинный шрифт на "обычных" сайтах используется довольно редко.

[Алексей]

Stalker_RED, других вариантов всеравно тут нет, поэтому проще просто по символам поставить. Для этого примера подойдет ~38

[Stalker_RED]

Алексей, есть же варианты. прокрутите страницу выше.

[Алексей]

Stalker_RED, который со split \n ? сказали же что там нет новой строки, поэтому только такая регулярка

[Stalker_RED]

раз https://toster.ru/answer?answer_id=1157146#answers...
два https://toster.ru/answer?answer_id=1157126#answers...

Answer 5

[Максим]

самое просто это на css сделать ... я имею ввиду с эмулировать

Comments

[be_a_man]

Каким образом с помощью CSS изменить DOM?

[Максим]

be_a_man, я не имел ввиду изменить дом ....имел ввиду с эмулировать ,т.е задать переносы там где нам надо

[be_a_man]

Максим Ленский, нужно в теги обернуть, чтобы анимации повесить

[Максим]

be_a_man, ааа... тогда извени ... но есть lettering.js попробуй им это сделать

[be_a_man]

Максим Ленский, да без проблем). Я вот тоже думаю оборачивать по словам или по буквам, потом считать длину их, сравнивать с длиной родителя и как-то объединять уже построчно..

[Максим]

be_a_man, я вот задал вопрос https://ru.stackoverflow.com/q/767541/33274 если отличный ответ будет то воспользуйся им