JavaScript: разделить HTML по классам

Question

Я создаю простой редактор HTML с помощью jquery.

скажем, у меня есть этот HTML:

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

Я хочу разделить свой контент по pageBreaks, чтобы получить такой вывод:

page1 buffer: page 1

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

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

идей?

Answer 1

Поскольку ваши страницы не заключены в HTML-тэги (что является подходящим для DOM способом решения этой проблемы), вам придется самостоятельно обрабатывать HTML в div контента, чтобы разделить контент на ваши страницы.,Вот один из способов сделать это, используя регулярное выражение для разделения этого содержимого на каждом из ваших разрывов страниц.

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

На этом этапе массив страниц будет содержать содержимое между каждым разрывом страниц.

И рабочий пример: http://jsfiddle.net/jfriend00/wpyH2/

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