IonDen
@IonDen
JavaScript developer. IonDen.com

Как разбить html-текст на несколько частей?

Допустим есть некая статья, оформленная с помощью html разметки. В наличии теги P, H1 и т.п.

Текст получается ajax-запросом одним куском.



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



Может быть есть какие-либо готовые инструменты для подобных задач или jQuery плагины?
  • Вопрос задан
  • 11643 просмотра
Пригласить эксперта
Ответы на вопрос 4
Assorium
@Assorium
Ответ написан
Комментировать
nochkin
@nochkin
Надо пропарсить его на теги , и потом орудовать этими кусочками считая их по длине, количеству или длине и количеству вместе.
Если html нормальный, то его можно парсить как xml.
Ответ написан
Комментировать
1) Вы зависите от шрифта, те для разных шрифтов текст будет разной длинны
2) Вы зависите от размера шрифта, те для разного размер шрифта будет текст разной длинны
3) Вы зависите от тегов, теги могут содержать стили с разными шрифтами, шрифты в теге h1 могут отличаться от шрифтов в теге p, к токму же падинги, маржены и др. стили
4) Вы зависите от необходимого размера разделения, те сколько пикселей по ширине и высоте примерно должно помещаться в один блок и как это должно быть на разных устройствах/размерах экрана
5) Вы не говорите как доржен вести себя html элемент не вмещающийся Ваш страничный блок

* Я бы для нескольких колонок советовал бы caniuse.com/multicolumn
* Я бы для нескольиких страниц элемент фиксированной высоты и overflow: hidden тогда количество страниц определяется Math.ceil(content.height / container.height), а очередная страница оределяется как top: container.height * (page_no - 1) и переключение на js (можно добавить градиент фон-прозрачный, чтобы обрубание текста выгладило красивее).
* Если разметка довольно простая и содержит много блоков, то $(content).children() и для каждого дочернего элемента высчитываем длинну символов и разделяем на блоки по длинне.
* Если разметка более сложная, то берем каждый элемент и высчитывем дилнну в зависимости от тега (класса, стиля) при этом запоминая в каких тегах мы находимся, когда доходим придельной длинны, то вставляем завершиющий тег дива страницы, а следующую страницу начинаем с сохраненных тегов разметки (теги inline h1, p и тд в теории должны закрываться страничным дивом).

ЗЫ. Есть всякие js плагины реализующие ... для обрезания больших блоков, то что я когда-то использовал делило текст на части и в зависимости от длинны уменьшало/увеличивало отображаемый текст до тех пор, пока элемент не будет необходимой дилнны, возможно Вам подойдут похожие плагины.
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Способ в лоб — обойти все все теги в присланных данных и мерять их высоту, если в блоке контейнере еще есть свободное место — переносим тег туда. Ну и т.д. Ситуация осложняется возможностью наличия простых текстовых нод. В целом много подводных камней у этого способа.

По поводу колонок — www.quirksmode.org/css/multicolumn.html
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы