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
}

如何通过“分页器”拆分一些HTML内容？

3 个答案: