2011-10-19 2 views
1

jquery로 간단한 html 편집기를 만들고 있습니다.javascript : split html by class

page1 buffer: page 1 

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

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

아이디어 :

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

내가 pageBreaks하여 내 콘텐츠를 분할 할이 출력을 가지고 :

내가이 HTML이 있다고?

+5

'$ ('. pageBreak : eq (0)') nextUntil ('. pageBreak')'? – zzzzBov

+0

감사합니다. 나는 nextUntil에 대해 몰랐습니다. – CurlyFro

답변

0

페이지가 HTML 태그로 묶여 있지 않으므로 (이 문제를 해결하기위한 DOM 친화적 인 방법 일 수 있음) 컨텐츠를 div로 분리하기 위해 HTML의 자체 처리를 수행해야합니다. 페이지. 다음은 정규 표현식을 사용하여 각 페이지 분할에서 해당 내용을 분할하는 한 가지 방법입니다.

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

이 시점에서 페이지 배열은 각 페이지 나누기 사이에 내용을 갖습니다.

그리고, 작동 예 : http://jsfiddle.net/jfriend00/wpyH2/

P.S. 브라우저는 항상 페이지에 넣은 innerHTML을 돌려주지 않으므로 정규 표현식은 매우 일반적으로 사용됩니다.