Question

i’m creating a simple html editor with jquery.

say i have this html:

<div id="content">
    page 1
<div class="pageBreak"></div>
    page 2
<div class="pageBreak"></div>
    page 3
</div>

i want to split my content by pageBreaks to have this output:

page1 buffer: page 1

page2 buffer: <div class="pageBreak"></div>page 2

page3 buffer: <div class="pageBreak"></div>page 3

ideas?

Answer 1

Since your pages are not enclosed by HTML tags (which would be the DOM-friendly way of solving this problem), you will have to do your own processing of the HTML in the content div to break apart the content into your pages. Here’s one way to do that using a regular expression to split that content at each of your pagebreaks.

var t = $("#content").html();
var pages = t.split(/<div\s+class\s*=\s*['"]?pageBreak["']?\s*>\s*<\/div>/i);

At this point, the pages array would have the content between each page break.

And, a working example: http://jsfiddle.net/jfriend00/wpyH2/

P.S. Note that the regular expression tries to be very general here because browsers do not always give you back the same innerHTML that you put in the page.