Как разделить некоторые HTML-контента по «разбиение по страницам»?

Question

Я использую ckeditor на своем веб-сайте, который поддерживает функцию «разбиения по страницам».Пример содержимого содержит разделители страниц, такие как:

<h1>
    Little Red Riding Hood</h1>
<p>
    &quot;<b>Little Red Riding Hood</b>&quot; is a famous <a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale">fairy tale</a> about a young girl&#39;s encounter with a wolf. The story has been changed considerably in its history and subject to&nbsp;numerous modern adaptations and readings.</p>

<div style="page-break-after: always;">
    <span style="display: none;">&nbsp;</span></div>

<p>
    The version most widely known today is based on the <a href="http://en.wikipedia.org/wiki/Brothers_Grimm" title="Brothers Grimm">Brothers Grimm</a> variant. It is about a girl called Little Red Riding Hood, after the red <a href="http://en.wikipedia.org/wiki/Hood_%28headgear%29" title="Hood (headgear)">hooded</a> <a href="http://en.wikipedia.org/wiki/Cape" title="Cape">cape</a> or <a href="http://en.wikipedia.org/wiki/Cloak" title="Cloak">cloak</a> she wears. The girl walks through the woods to deliver food to her sick grandmother.</p>

Этот специальный div - разделитель страниц :

<div style="page-break-after: always;">
    <span style="display: none;">&nbsp;</span></div>

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

Но как проверить и разделить ее?Существует ли чистый javascript или решение на основе Extjs?

Answer 1

Для этого можно использовать функцию String.prototype.split();: container.innerHTML.split('<div style="page-break-after: always;">');, предполагая, что контейнер для вашего HTML-кода равен container.

Вы можете использовать Регулярные выражения для этого:

var regexp = /<div\s+style=('")page-break-after:\s*always;?.*?$1[^>]*>.*?<\/div>/gm;

Который найдет все DIV прерывателя для вас. Затем вы можете разделить строку, используя это.

Answer 2

Используйте регулярное выражение:

content.split(/<div style="page-break-after: always;">[\s\S]*?<\/div>/)

Есть ли лучший способ для [\s\S] детали? Я думаю, что это немного странно.

Answer 3

HTML:

<form name="myform">
    <input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

JavaScript:

function breakeveryheader(){
    var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
    for (i=0; i<document.getElementsByTagName("H2").length; i++)
        document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
}