|
[Javascript]自己写的页面正则分页
最近项目要求实现新闻内容页无刷新分页,把自己写的页面正则分页拿出来和大家分享
js分页代码很好找,关键是常见的js分页代码没有匹配分页标记点即不拆开html标记的功能。
下面说说解决思路:
1.按字数分页,可设默认值,比如3000,那就是每页3000字
2.分页字数可变,受分页规则控制。
3.分页规则为正则匹配该页最后一个字,如果是中文或者中文全角符号则可以分页,如不是则增加该页分页字数继续匹配
复制内容到剪贴板
代码:
<script type="text/javascript">
function imgfm()
{
var pic=document.getElementById("hicontent").getElementsByTagName('img');
for(i=0;i<pic.length;i++)
{
if(pic.width>540)
{pic.width=540;}
}
}
var count;
count=2800;
//匹配中文和全角符号的正则
var regExp=/^[\u4e00-\u9fa5\(\)\《\》\——\;\,\。\“\”\>]$/gi;
function DHTMLpagenation(content) { with (this)
{
//本人时间所限,目前只有ie可用,用firefox不起作用
if (window.XMLHttpRequest)
{
return ;
}
// client static html file pagenation
this.content=content;
this.contentLength=content.length;
this.pageSizeCount;
this.perpageLength=1000; //默认每页字节数.
this.currentPage=1;
this.regularExp=/\d+/;
this.divDisplayContent;
this.contentStyle=null;
this.strDisplayContent="";
this.divDisplayPagenation;
this.strDisplayPagenation="";
arguments.length==2?perpageLength=arguments[1]:'';
try {
divExecuteTime=document.createElement("DIV");
document.body.appendChild(divExecuteTime);
}
catch(e)
{
}
if(document.getElementById("hicontent"))
{
divDisplayContent=document.getElementById("hicontent");
}
else
{
try
{
divDisplayContent=document.createElement("DIV");
divDisplayContent.id="hicontent";
document.body.appendChild(divDisplayContent);
}
catch(e)
{
return false;
}
}
if(document.getElementById("divPagenation"))
{
divDisplayPagenation=document.getElementById("divPagenation");
}
else
{
try
{
divDisplayPagenation=document.createElement("DIV");
divDisplayPagenation.id="divPagenation";
document.body.appendChild(divDisplayPagenation);
}
catch(e)
{
return false;
}
}
DHTMLpagenation.initialize();
return this;
}};
DHTMLpagenation.initialize=function() { with (this)
{
divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
if(contentLength<=perpageLength)
{
strDisplayContent=content;
divDisplayContent.innerHTML=strDisplayContent;
return null;
}
pageSizeCount=Math.ceil((contentLength/perpageLength));
DHTMLpagenation.goto(currentPage);
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
strDisplayPagenation=" ";
if(currentPage&¤tPage!=1)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()"> << 上一页</a> ';
else
strDisplayPagenation+="<< 上一页 ";
strDisplayPagenation+=" ... ";
if(currentPage&¤tPage!=pageSizeCount)
strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页 >> </a> ';
else
strDisplayPagenation+="下一页 >> ";
divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
currentPage=iCurrentPage;
var c=content.substr((currentPage-1)*perpageLength,perpageLength).charAt(perpageLength-1);
if(regularExp.test(iCurrentPage))
{
//currentPage=iCurrentPage;
if (regExp.test(c) || c=="")
{
strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
}
else
{
for(var i=perpageLength;i<contentLength;i++)
{
if(regExp.test(c) || c=="")
{
strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
break;
}
else{
perpageLength++;
c=content.substr((currentPage-1)*perpageLength,perpageLength).charAt(perpageLength-1);
}
}
}
}
else
{
alert("page parameter error!");
}
DHTMLpagenation.displayPage();
DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
if(regularExp.test(iPerpageLength))
{
DHTMLpagenation.perpageLength=iPerpageLength;
DHTMLpagenation.currentPage=1;
DHTMLpagenation.initialize();
}
}};
DHTMLpagenation(document.getElementById("hicontent").innerHTML,count);
</script>
呵呵,献丑了
效果见:http://www.chinasuntv.com/hi/hicontent.aspx?p=1175 |
|