How to split some html content by “page breaker”?

Question

I use ckeditor in my website, which supports "page breaker". The sample content contains page breakers like:

<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>

This special div is page breaker :

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

I want to use javascript to split the content into multi pages by the page breaker, to tell the user how many pages the content will be, and can let user preview each page.

But how to check and split it? Is there a pure javascript or "Extjs" based solution?

Answer 1

You can use the String.prototype.split(); function for this: container.innerHTML.split('<div style="page-break-after: always;">'); , assuming the container for your HTML code to be container .

You can use Regular Expressions for this:

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

Which will find all the breaker DIVs for you. You can then split the string using that.

Answer 2

Use regex:

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

Is there a better way for [\\s\\S] part? I think it's a little strange.

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
}