Оберните текст каждые 2500 символов в <div> для разбиения на страницы с использованием PHP или JavaScript

У меня длинный блок текста. Я хочу обернуть каждые 2500 символов этого текста в<div> такой я мог бы сделать нумерацию страниц на нем.

Следующее не работает:

//replace 2500 for 5 for purpose of this example
$text="sfdkjas;fakska;ldjk";
$text=wordwrap($text, 5, '<div class="individualPage">');

выход:

sfdkj<div class="individualPage">as;fa<div class="individualPage">kska;l<div
class="individualPage">djk

Очевидно, мне нужно закрытие</div> тег, чтобы сделать эту работу.

У кого-нибудь есть предложения по этому вопросу в PHP или Javascript / jQuery?

Ответы на вопрос(4)

Вот как я это сделаю:

$out = '';
$text = str_split($text, 2500);
foreach($text as $t){
    $out .= "<div class='individualPage'>".$t."</div>";
}
echo $out;

РЕДАКТИРОВАТЬ: Это разобьет слова, так что придерживайтесьwordwrap(), : D

 30 июн. 2012 г., 22:55
Ах, не знал этого. Спасибо за информацию.
 30 июн. 2012 г., 22:54
Это сломает слова, в отличие отwordwrap
Решение Вопроса

Просто добавьте</div> затем?

$text = '<div class="individualPage">'
      . wordwrap($text, 5, '</div><div class="individualPage">')
      . '</div>';

Тем не менее, вы можете сделать еще лучше с Javascript: вы можетеразбиение на страницы в ответ на размер экрана зрителя.

Просто установите ваш HTML:

<div id="target">...</div>

Добавьте немного CSS для страниц:

#target {
    white-space: pre-wrap; /* respect line breaks */
}
.individualPage {
    border: 1px solid black;
    padding: 5px;    
}

А затем используйте следующий код:

var contentBox = $('#target');
//get the text as an array of word-like things
var words = contentBox.text().split(' ');

function paginate() {
    //create a div to build the pages in
    var newPage = $('<div class="individualPage" />');
    contentBox.empty().append(newPage);

    //start off with no page text
    var pageText = null;
    for(var i = 0; i < words.length; i++) {
        //add the next word to the pageText
        var betterPageText = pageText ? pageText + ' ' + words[i]
                                      : words[i];
        newPage.text(betterPageText);

        //Check if the page is too long
        if(newPage.height() > $(window).height()) {
            //revert the text
            newPage.text(pageText);

            //and insert a copy of the page at the start of the document
            newPage.clone().insertBefore(newPage);

            //start a new page
            pageText = null;
        } else {
            //this longer text still fits
            pageText = betterPageText;             
        }
    }    
}

$(window).resize(paginate).resize();

Это будет работать в сочетании с решением PHP, обеспечивая обратную совместимость, если javascript отключен.

 30 июн. 2012 г., 22:52
Чище, чем мое решение!
 30 июн. 2012 г., 23:00
@timpeterson: у javascript нет встроенного переноса слов. Вы заботитесь о количестве символов, или вы на самом деле после вертикальной высоты?
 30 июн. 2012 г., 23:22
@timpeterson:here's версия, которая переопределяется при изменении размера окна!
 tim peterson30 июн. 2012 г., 22:57
привет @Eric, спасибо за это, ты случайно не знаешь решение javascript?
 tim peterson30 июн. 2012 г., 23:14
@ Эрик, наверное, я не уверен, волнуюсь ли я о знаках или о высоте по вертикали. Я думаю, все, что кажется наиболее «естественным», то есть то, что наиболее близко повторяет страницы в физической книге. У вас есть решение по вертикальной высоте, которым вы могли бы поделиться?

Просто для удовольствия - вот довольно уродливый JavaScript RegExp, который разбивает текст на страницы и старается не разбивать слова. Хотя я не уверен, насколько хорошо он будет работать с огромным количеством текста.

var text = ....
/,/ Grab 2500 (or slightly more if it doesn't exactly end on a word boundary)
// characters, or less than 2500 if it's at the end of the string.
text = text.replace(/(((.|\n){2500,2520}?\b)|((.|\n){1,2499}(?!.)))/mg, 
                    '<div class="individual-page">$1</div>')

jsFiddle

 tim peterson30 июн. 2012 г., 23:43
@jimr, спасибо за это, учту
 30 июн. 2012 г., 23:39
Не подходит для слов длиннее 20 символов
 30 июн. 2012 г., 23:39
Нет - это многострочное регулярное выражение -$ соответствует концу строки. JavaScript не имеет\Z что делают некоторые другие языки
 30 июн. 2012 г., 23:41
Это более простое регулярное выражение работает для меня:/(.|\n){1,2500}(\b|$)/mg, Я что-то пропустил?
 30 июн. 2012 г., 23:38
Ницца! Вы можете заменить(?!.) с$, Я думаю.

Просто добавьте открывающий div в начале, закрывающий div в конце и закрывающий div в начале каждой итерации.

$div = '<div class="individualPage">';
$text = $div . wordwrap($text, 5, "</div>$div") . '</div>'; 

В Javascript встроенное решение не так хорошо.

var s = text, div = "<div class='individualPage'>";
while(text.length > 5) {
  s = text.slice(0, 5) + "</div>" + div;
  text = text.slice(5);
}
s = div + s + "</div>";
 30 июн. 2012 г., 23:01
@PeterOlson: Я сделал этот комментарий до того, как вы отредактировали его - наши ответы были идентичны, но я отправил первым.
 30 июн. 2012 г., 23:03
@timpeterson Конечно, смотрите мои изменения.
 30 июн. 2012 г., 22:57
@ Эрик Я не уверен, что понимаю, почему ответ, на который вы ссылались, будет иметь более высокую производительность, чем этот; на самом деле они выглядят почти одинаково.
 tim peterson30 июн. 2012 г., 22:56
Привет, @Peter, спасибо за это, ты случайно не знаешь решение javascript?
 30 июн. 2012 г., 22:51
Too slow! Edit: nice improvement

Ваш ответ на вопрос