Как разбивать параграф построчно?

Question

[ilovemaryjane]

Параграф текста состоит из нескольких строк. Как программно разбить каждую строку в отдельный div?

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

Пример можно посмотреть тут - https://veritystudios.com/services

АПД: 3 ответа и все мимо. Естественно речь о линиях (строках, lines) на которые разбивает БРАУЗЕР в зависимости от вьюпорта. А не линии, в виде данных в хтмл)

Answer 1

[Stalker_RED]

text.replace(/(.+?(\n|$))/g, '<div class="wrapper">$1</div>')

UPD: такой вариант я уже делал, процитирюу сюда:
Код страшненький, но работает: https://jsfiddle.net/Stalk/mcv6gsmt/2

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

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

Comments

[ilovemaryjane]

А кто сказал что будут данные с новой строки? Все в одну строку. Это браузер линии переносы делает. Это надо разбиваь.

[Stalker_RED]

ilovemaryjane, вы сказали "Параграф текста состоит из нескольких строк", потому вам и написали три решения с \n

[Stalker_RED]

ilovemaryjane, подправьте вопрос. а ответ на него я уже делал:
https://toster.ru/answer?answer_id=1157146#answers...

[ilovemaryjane]

Stalker_RED, спс, то что надо) ПОсмотрю еще как в Lettering устроено, там оказывается тоже есть lines, опция. А то я не его использую а charming.js, а там только по буквам.

Answer 2

[Никита Ермиличев]

<div class='my-text'>
Я текст
и я пишусь
с каждой строки
</div>

JS:

function splitMe(selector)
{
	var container = document.querySelector(selector);
	var arr = container.innerHTML.split(/\n+/);
	var str = '';
	
	for(var i = 0; i < arr.length; i++)
	{
		if(arr[i]){
			arr[i] = '<div>'+arr[i]+'</div>';
		}
	}
	
	container.innerHTML = arr.join(' ');
}

splitMe('.my-text');

JQuery:

$(function() {
    $(".my-text").each(function() {
        var lines = this.innerHTML.split("\n");
        lines = $.map(lines, function(val) {
            return "<div>" + (val) + "</div>"
        });
        $(this).html(lines)
    })
});

Comments

[ilovemaryjane]

Все данные в одной строке конечно же. Линии на которые разбивает браузер в зависимости от вьюпорта.

[Никита Ермиличев]

ilovemaryjane,

Параграф текста состоит из нескольких строк

Так каждая строка - это перенос в зависимости от ширины родительского контейнера?

[ilovemaryjane]

Никита Ермиличев, конечно, я думал это само собой разумеещеся) Не думал что кто-то использует \n в верстке, если честно.

Answer 3

[Дмитрий Беляев]

разбиваем в HTML-строку:

function text2HTML(text) {
  return text.split('\n').map(line => `<div>${line}</div>`).join('');
}

разбиваем в DOM фрагмент, который потом можно будет вставить на страницу через appendChild:

function text2DOMFragment(text) {
  return text.split('\n').reduce((frag, line) => (frag
    .appendChild(document.createElement('div'))
    .appendChild(document.createTextNode(line)),
  frag), document.createDocumentFragment());
}

Comments

[ilovemaryjane]

Все данные в одной строке конечно же. Линии на которые разбивает браузер в зависимости от вьюпорта.