ueditor 长文章分页

最新推荐文章于 2025-07-15 21:00:32 发布

转载最新推荐文章于 2025-07-15 21:00:32 发布 · 2.8k 阅读

本文介绍了一种利用JavaScript实现长文章自动分页的方法，重点介绍了如何使用正则表达式处理带有HTML标签的内容，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最基础的长文章分页虽然很简单，但一直没有去实践，最近没什么事情便捣鼓了一把

其实也没有说亲自去写每一行代码，网上搜索了一把，看中一哥们的一篇文章，便拿过来改吧改吧，因为是事后很久才写这个笔记，所以记不住那个文章的链接了，在此也正式的说声：抱歉，兄弟！

长文章分页常见的有两种方式，一种是通过js,另一种是结合后台程序，根据长度做截取，但因为html标签在截取的时候容易出现标签没有闭合的情况，而要解决这个问题就需要用正则去匹配，比较麻烦，个人比较喜欢第一种，方便实用而且可控性、灵活性比较高，当然缺陷就是小编估计不干了，每篇文章都得手动的去插入分隔符；

长文章分页的关键点：分页符比如ueditor的 _ueditor_page_break_tag_

两个js函数 split 和 test

下面上代码

<span style="font-size:14px;"><script type="text/javascript">
var pageCount = 1;//总页数
var regExp = /_ueditor_page_break_tag_/;//根据某处字符来分页
var saveContent;//用于保存分页数据
var content, pageList;//保存全局ID
$(document).ready(function(){
UeInitialize("#content-box","#page");
});
UeInitialize = function (id,page) {
var cTxt = $(id).html();
content = $(id);
pageList = $(page);
if (cTxt != null && regExp.test(cTxt)) {
saveContent = cTxt.split(regExp);
pageCount = saveContent.length;
}
window.UePageContent(1);
};
UePageContent = function (pageIndex) {
if (pageIndex >= 1 && pageIndex <= pageCount && saveContent != null && saveContent.length >= 0) {
var pageHtml = pageList;
if ((parseInt(pageIndex) - 1) <= saveContent.length) {
content.html(saveContent[parseInt(pageIndex) - 1]);
}
pageHtml.html("");
var innHtml = "页数：" + pageIndex + "/" + pageCount;
innHtml += "<a target='_self' href='javascript:UePageContent(1)'>首页</a>";
if (pageIndex > 1) {
innHtml += "<a target='_self' href='javascript:UePageContent(" + (parseInt(pageIndex) - 1) + ")'>上一页</a>";
}
if (pageIndex < pageCount) {
innHtml += "<a target='_self' href='javascript:UePageContent(" + (parseInt(pageIndex) + 1) + ")'>下一页</a>";
}
innHtml += "<a target='_self' href='javascript:UePageContent(" + pageCount + ")'>末页</a>";
pageHtml.html(innHtml);
}
}
</script></span>