每 2500 个字符换行一次文本，<div>以便使用 PHP 或 JavaScript 进行分页

Question

我有一个很长的文本块。我想把这篇文章的每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中对此有什么建议吗？

Answer 1

只需添加</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的情况下提供向后兼容性。

Answer 2

这是我的做法：

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

编辑：这会拆散单词，所以请使用wordwrap()。：D

Answer 3

只需在每次迭代的开始添加一个开始的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>";

Answer 4

只是为了好玩-这里有一个相当丑陋的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