当前位置：首页 > 全部内容 > 正文

纯JS实现简洁实用的文章自动与手动分页功能

作者：木棉

时间：2026-10-28

浏览：630

本文提供一段简洁实用的纯JavaScript分页代码，支持根据字数自动分页和基于[NextPage]标记的手动分页两种模式。代码包含页码导航、正文查找高亮及多种显示样式，可直接嵌入HTML页面调用，无需后端支持即可实现长文章的前端分页展示。

文章目录

JavaScript分页核心逻辑与配置

具体实现代码如下所示：

//定义每页显示的字符数量
PageSize=5000;
//设定分页模式
flag=2;//1代表根据字数自动计算分页，2代表根据[NextPage]标记进行手动分页
//设定默认显示的页码
startpage = 1;
//定义导航栏的显示样式：0为常规列表，1为直接跳转，3为下拉菜单
TopShowStyle = 1;
DownShowStyle = 0;
var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage;
 key="";
 currentSet=0;
 //从XML节点获取文章内容
 var Text=xmlArticle.selectSingleNode("//Content").text;
 TotalByte=Text.length;
 //若选择自动分页模式
 if (flag==1)
 {
 //计算总页数，基于总字节数除以每页大小
 PageCount=Math.round(TotalByte/PageSize);
 //处理余数，若有余数且大于0.5则进位
 if(parseFloat("0."+TotalByte%PageSize)>0){
 if(parseFloat("0."+TotalByte%PageSize)<0.5){
 PageCount=PageCount+1;
 }
 }
 var PageNum=new Array(PageCount+1);
 var PageTitle=new Array(PageCount+1);
 PageNum[0]=0;
 PageTitle[0]="";
 var sDrv1,sDrv2,sDrv3,sDrv4,sFlag;
 var sDrvL,sTemL;
 var sTem1,sTem2,k;
 sFlag=0;
 //遍历生成每一页的起始位置
 for(j=1;j<PageCount+1;j++){
 PageNum[j]=PageNum[j-1]+PageSize;
 PageTitle[j]="";
 //alert(j);
 //识别HTML换行标签，确保分页不切断标签
 sDrv1="<br>";
 sDrv2="<BR>";
sDrv3="<Br>";
sDrv4="<bR>";
sDrvL=sDrv1.length;
 for(k=PageNum[j];k<=TotalByte;k++){
 sTem1=Text.substring(PageNum[j]-sDrvL,k);
 sTemL=sTem1.length;
 sTem2=sTem1.substring(sTemL-sDrvL,sTemL)
 //若末尾匹配到换行标签，则在此处分页
 if (sTem2==sDrv1 || sTem2==sDrv2 || sTem2==sDrv3 || sTem2==sDrv4)
 {
 sFlag=sFlag+1;
 PageNum[j]=k;
 break;
 }
 }
 //若计算出的位置超出文本长度，则截断
 if (PageNum[j]>TotalByte)
 {
 break;
 }
 }
 //修正总页数数组长度
 if (j<PageCount)
 {
 PageNum.length=j;
 PageCount=j
 }
 //若存在多个换行符且页数少于换行符数，调整页数
 if (PageCount>1&&sFlag>1&&PageCount<sFlag)
 {
 PageCount=sFlag+1;
 }
 }
 else{
 //手动分页模式处理
 var j,sFlag,PageCount,sText;
 var sTitleFlag;
 var PageNum=new Array();
 var PageTitle=new Array();
PageSize=0;
 j=1;
 PageNum[0]=-10;
 PageTitle[0]=""; 
 sFlag=0;
 sText=Text;
do
 {
 //截取剩余文本进行查找
 sText=Text.substring(PageNum[j-1]+10,TotalByte);
//查找手动分页标记[NextPage
 sFlag=sText.indexOf("[NextPage");
//若标记后紧跟等号，则提取标题
 if (sText.substring(sFlag+9,sFlag+10)=="=")
 {
 sTitleFlag=sText.indexOf("]",sFlag);
 PageTitle[j]=sText.substring(sFlag+10,sTitleFlag);
 }
 else{
 PageTitle[j]="";
 }
//若找到标记，记录分页位置；否则设为文本末尾
 if (sFlag>0)
 {
 PageNum[j]=sFlag+PageNum[j-1]+10;
 }
 else{
 PageNum[j]=TotalByte;
 }
j+=1;
 }
 //循环直到处理完所有文本
 while (PageNum[j-1]<TotalByte);
PageCount=j-1;
 }
分页渲染与导航函数实现function text_pagination(Page){
 var Output,Byte;
//若未指定页码，默认为第1页
 if(Page==null){Page=1;}
Output="";
 //构建顶部导航表格框架
 Output=Output+"<table width=100% height=30 border=0 align=center cellpadding=0 cellspacing=0>";
 Output=Output+"<tr>";
 Output=Output+"<td height=1 background=Images/DotLine.gif></td>";
 Output=Output+"</tr>";
//头部功能导航条区域
//正文查找功能区域
 Output=Output+"<td align=left bgcolor=#f0faff width='40%'>&nbsp;"; 
 Output=Output+"<input type=text name=keys onchange='key=this.value' size=12>&nbsp;<input type=button name=search value='查找正文' onclick='searchkey();' style='width:60'>";
 Output=Output+"</td>";
 Output=Output+"<td align=right bgcolor=#f0faff>";
//页码显示方式一：显示当前页及标题
 //第x页：分页标题
 if (Page==0 || PageCount==0){
 Output=Output+"当前是：<font color=red>全文显示</font>" ; 
 }
 else{
 //计算当前页字节范围
 if(TotalByte>PageSize){Byte=PageNum[Page]-PageNum[Page-1]}else{Byte=TotalByte};
 Output=Output+"第 <font color=red>"+Page+"</font> 页";
 //若存在分页标题，则显示
 if (PageTitle[Page]!="")
 {
 Output=Output+"：<font color=800000>"+PageTitle[Page]+"</font>";
 }
 Output+='&nbsp;';
 }
//显示方式二：下拉菜单选择（已注释）
 //if (PageCount>0)
 //{
 // Output=Output+Article_PageNav(2,Page);
 // Output=Output+"&nbsp;</td>";
 //}
//显示方式三：页码选择列表（已注释）
 //Output=Output+"<td align=right bgcolor=#f0faff>";
 //Output=Output+Article_PageNav(0,Page);
 //Output=Output+"</td>";
Output=Output+"</tr>";
 Output=Output+"<tr>";
 Output=Output+"<td height=1 background=Images/DotLine.gif></td>";
 Output=Output+"</tr>";
 Output=Output+"</table>";
//显示正文内容区域
 if(Page==0) {
 //不分页模式，显示全文
 tempText=Text;
 }
 else{
 //分页模式
 if (flag==1)
 //自动分页逻辑
 {
 tempText=Text.substring(PageNum[Page-1],PageNum[Page]); 
 }
 else{
 //手动分页逻辑
 if (PageTitle[Page-1].length==0)
 {
 tempText=Text.substring(PageNum[Page-1]+10,PageNum[Page]);
 }
 else{
 //扣除标题标记长度
 tempText=Text.substring(PageNum[Page-1]+11+PageTitle[Page-1].length,PageNum[Page]);
 }
 }
 }
 //布置内容区域
 Output=Output+"<div align=center>";
 Output=Output+Article_PageNav(TopShowStyle,Page);
 Output=Output+"</div>";
 Output=Output+"<div id=world>";
 Output=Output+tempText;
 Output=Output+"</div>";
 Output=Output+"<br>";
Output=Output+"<div align=center>";
 Output=Output+Article_PageNav(DownShowStyle,Page);
 Output=Output+"</div>";
 //将HTML写入目标元素
 article.innerHTML = Output;
 //若非第一页，滚动至顶部
 if (Page>1)
 {
 document.location.href='#top';
 }
 //恢复搜索框的值
 eval(document.all.keys).value=key;
 //若有关键字，执行查找
 if (key!=""){searchkey();}
 }
 function searchkey(){
 //正文查找函数
 h="<font class=keyworld>";
 f="</font>";
 keyset=new Array();
 key=document.all.keys.value;
 if (key==""){
 alert("请输入关键字！");
 return;
 }
 else{
 keyset[0]=tempText.indexOf(key,0);
 if (keyset[0]<0){
 return;
 }else
 temp=tempText.substring(0,keyset[0]);
 temp=temp+h+key+f;
 temp2=tempText.substring(keyset[0]+key.length,tempText.length);
 //循环查找并高亮所有匹配项
 for (i=1;i<tempText.length;i++) {
 keyset[i]=tempText.indexOf(key,keyset[i-1]+key.length);
 if(keyset[i]<0){
 temp=temp+tempText.substring(keyset[i-1]+key.length,tempText.length);
 break;
 }else{
 temp=temp+tempText.substring(keyset[i-1]+key.length,keyset[i])+h+key+f;
 }
 }
 world.innerHTML = temp;
 }
 }
function Article_PageNav(ShowStyle,Page){
 //分页码显示函数
 //参数为调用样式，0=简单样式，1=标准样式
 var temp="";
if (ShowStyle==0)
 //简单样式
 {
 tempPage=Page;
 if(TotalByte>PageSize){ 
 //处理页码边界情况
 if (Page-4<=1){
 temp=temp+"<font face=webdings color=#999999>9</font>";
 if (Page<=1){temp=temp+"<font face=webdings color=#999999>7</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";}
 if (PageCount>10){
 for(i=1;i<8;i++){
 if (i==Page){
 temp=temp+"<font color=red>"+i+"</font> ";
 }else{
 temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
 }
 }
 temp=temp+" ...";
 }
 else{
 for(i=1;i<PageCount+1;i++){
 if (i==Page){
 temp=temp+"<font color=red>"+i+"</font> ";
 }
 else{
 temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
 }
 }
 }
//处理末页及中间页码显示
 if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
 if(PageCount<10){temp=temp+"<font face=webdings color=#999999>:</font>";}else{temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";
 }
 else if(Page+4<=PageCount){
 temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";
 temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";
 if (PageCount>10){
 temp=temp+"..";
 for(i=Page-4;i<Page+4;i++){
 if (i==Page){
 temp=temp+"<font color=red>"+i+"</font> ";
 }else{
 temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
 }
 }
 temp=temp+" ..";
 }
 else{
 for(i=1;i<PageCount+1;i++){
 if (i==Page){
 temp=temp+"<font color=red>"+i+"</font> ";
 }
 else{
 temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
 }
 }
 }
 if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
 temp=temp+"<a href=javascript:text_pagination("+PageCount+")><font face=webdings>:</font></a>";
}
 else{
 temp=temp+"<a href=javascript:text_pagination(1)><font face=webdings>9</font></a>";
 temp=temp+"<a href=javascript:text_pagination("+(Page-1)+")><font face=webdings>7</font></a>";
 temp=temp+".."
for(i=Page-2;i<PageCount+1;i++){
 if (i==Page){
 temp=temp+"<font color=red>"+i+"</font> ";
 }else{
 temp=temp+"<a href=javascript:text_pagination("+i+") >"+i+"</a>"+" ";
 }
 }
if (Page==PageCount){temp=temp+"<font face=webdings color=#999999>8</font>";}else{temp=temp+"<a href=javascript:text_pagination("+(Page+1)+")><font face=webdings>8</font></a>";}
 temp=temp+"<font face=webdings color=#999999>:</font>";
 }
 }
 else{
 temp=temp+"<font color=red>1</font> ";
 }
temp=temp+" <a href=javascript:text_pagination(0)>显示全部</a>"
 }
 else if (ShowStyle==1)
 //标准样式
 {
 //显示上一页及页码列表
 if(TotalByte>PageSize){if(Page!=0){if(Page!=1){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page-1)+")><font color=3366cc>[上一页]</font></a>&nbsp;&nbsp;";}}}
 for (i=1;i<PageCount+1 ;i++ )
 {
 if (Page==i)
 {
 temp=temp+"<font color=800000>["+i+"]</font>&nbsp;&nbsp;";
 }else{
 temp=temp+"<a href='#top' onclick=javascript:text_pagination("+i+")><font color=3366cc>["+i+"]</font></a>&nbsp;&nbsp;";
 }
 }
 temp=temp+"<a name='foot'></a>";
 //显示下一页及显示全部链接
 if(TotalByte>PageSize){if(Page!=0){if(Page!=PageCount){temp=temp+"<a href='#top' onclick=javascript:text_pagination("+(Page+1)+")><font color=3366cc>[下一页]</font></a>";}}}
temp=temp+" <a href=javascript:text_pagination(0)><font color=3366cc>显示全部</font></a>"
 }
 else if (ShowStyle==2)
 //下拉菜单样式
 {
 temp=temp+'<select onchange="text_pagination(this.value)">'
 for (i=1;i<PageCount+1 ;i++ )
 {
 if (Page==i)
 {
 temp=temp+"<option value='"+i+"' selected style='color:red'>第 "+i+" 页"
 }else{
 temp=temp+"<option value='"+i+"'>第 "+i+" 页";
 }
 //若存在标题，显示在选项中
 if (PageTitle[i].length!=0)
 {
 temp=temp+'：'+PageTitle[i];
 }
 temp=temp+"</option>";
 }
 temp=temp+"</select>";
 }
return (temp);
 }
//默认页
//初始化调用分页函数
text_pagination(startpage);

--------------分页js代码结束--------------

------------html页面，调用分页js------------------

HTML页面集成与调用示例

HTML页面调用代码如下：

<HTML><HEAD><TITLE>js分页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bottomMargin=0 leftMargin=0 topMargin=0 rightMargin=0>
<TABLE cellSpacing=1 cellPadding=5 width="95%" align=center 
border=0>
 <TBODY>
 <TR>
 <TD>
<xml id=xmlArticle>
<Article>
<Info>
<Content>
<![CDATA[
大家来试验分页哦~~~~~[NextPage]我分~~~[NextPage]我再分[NextPage]分分分
]]>
</Content>
</Info>
</Article>
</xml>
<!--正文分页Js-->
 <SCRIPT language=Javascript 
 src="attachments/month_0607/j200674214834.js"></SCRIPT>
</TD></TD></TR></TBODY></TABLE></TD></TR>
</TBODY></TABLE>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS中将数组和对象混合组装为JSON字符串

JS运算符优先级与结合性的区别是什么？

JS Map怎么只遍历Key或Value

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

为什么JS中typeof []返回object：数组类型检测误区解析

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法