<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>页面分页</title>
<style type="text/css">
*
{
font-size: 10.2pt;
font-family: tahoma;
line-height: 150%;
}
.divContent
{
border: 1px solid red;
background-color: #FFD2D3;
width: 500px;
word-break: break-all;
margin: 10px 0px 10px;
padding: 10px;
}
</style>
</head>
<body>
<h1>标题</h1>
<div id="divContent">
</div>
<script type="text/javascript">
// input里面不允许包含:初中、中学、初级中学这三个词语
s="<p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><img src='/login/image/password.png' /><p><table border='1'><tr><td>111</td><td>user</td></tr><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr></table>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,<img src='/login/image/password3.png' />有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p><table border='1'><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr><tr><td>111</td><td>username</td></tr></table>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明,学习好功课的重要性。 </p><p>她说:“牛顿坐在树下,眼睛盯着树在思考,这时,有一个苹果落在他的头上,于是他发现了万有引力定律,孩子们,你们想想看,做一位伟大的科学家多么好,多么神气啊,要想做到这一点,就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说:“兴许是这样,可是,假如他坐在学校里,埋头书本,那他就什么也发现不了啦。” </p>";
mainContent = s;
var tabReg = /(<table[^>]*>((?!table).)*<\/table>)+/gi;
var tabMatch = tabReg.test(s);
var tabMatchContentArray = [];
tabMatchContentArray = s.match(tabReg);
if(tabMatch)
{
mainContent = s.replace(tabReg,"#");
}
//alert(mainContent);
//对img标签进行匹配
var imgReg = /(<img\s+src='\S+'\s*(\/)?>)/gi;
imgMatchContentArray = s.match(imgReg);
if(imgReg.test(s))
{
//将img标签替换为*
mainContent = mainContent.replace(imgReg,"*");
}
var pageIndex = 4;
var size = 100;
var tableContentArray = mainContent.split("#");
var array = [];
var arrayIndex = [];
var len =0;
for(var i=0;i<tableContentArray.length;i++)
{
var con = tableContentArray[i];
len += con.length;
arrayIndex[i] = len;
array[i] = Math.ceil(con.length /size);
}
var tableIndexArray = [];
var sum = 1;
for(var j=0;j<array.length-1;j++)
{
sum += array[j];
tableIndexArray[j] = sum;
}
//alert(tableIndexArray);
//alert(tableIndexArray.indexOf(pageIndex) );
var currentPageContent = mainContent.substr((pageIndex-1)*size,size);
alert(currentPageContent);
if(tableIndexArray.indexOf(pageIndex) >= 0)
{
alert(1111);
currentPageContent = tabMatchContentArray[tableIndexArray.indexOf(pageIndex)];
//alert(currentPageContent);
}
if(currentPageContent.indexOf("#")!= -1)
{
alert(222);
var beginToCurrentPageContent = mainContent.substr(0,pageIndex*size);
var tabLastIndex = beginToCurrentPageContent.lastIndexOf("#");
alert(tabLastIndex);
currentPageContent = currentPageContent.substr(0,tabLastIndex-(pageIndex-1)*size);
alert(currentPageContent);
//当前页是否有 * 获取最后一个 * 的位置
var indexOf = currentPageContent.indexOf("*");
if(indexOf >= 0)
{
//获取开始到当前页位置的内容 中的 * 的最后的下标
var reCount = beginToCurrentPageContent.split("*").length - 1;
var contentArray = currentPageContent.split("*");
currentPageContent = replaceImgContent(contentArray,reCount,imgMatchContentArray);
}
}
else
{
alert(22222);
//当前页是否有 * 获取最后一个 * 的位置
var indexOf = currentPageContent.indexOf("*");
if(indexOf >= 0)
{
//获取从开始位置到当前页位置的内容
var beginToCurrentPageContent = mainContent.substr(0,pageIndex*size);
//获取开始到当前页位置的内容 中的 * 的最后的下标
var reCount = beginToCurrentPageContent.split("*").length - 1;
var contentArray = currentPageContent.split("*");
currentPageContent = replaceImgContent(contentArray,reCount,imgMatchContentArray);
}
}
document.getElementById("divContent").innerHTML= currentPageContent;
/* currentArray:当前页以 * 分割后的数组
replaceCount:从开始内容到当前页的内容 * 的个数
matchArray : img标签的匹配的内容
*/
function replaceImgContent(currentArray,replaceCount,matchArray)
{
var result = "";
for(var i=currentArray.length -1,j = replaceCount-1 ;i>=1; i--)
{
var temp = (matchArray[j] + currentArray[i]);
result = temp + result;
j--;
}
result = currentArray[0] + result ;
return result;
}
</script>
</body>
</html>
js 分页问题
原创
©著作权归作者所有:来自51CTO博客作者好学Ace的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:android 短信拦截
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
JS中理解码点和码元,解决emoji带来的乱码问题
了解码元和码点,处理emoji表情字符串截取带来的乱码问题,在String原型中增加自定义方法来处理
码元 码点 emoji乱码 字符串截取 字符串长度 -
js 分页
js 分页
js -
js javascript js控制分页打印,打印分页
[code="html"]javascript打印-打印页面设置-打印预览代码 .Noprint{display:none;} .PageNex); } funct...
JavaScript IE HTML ViewUI html -
js实现分页
sysdeptlist.jsp:<%@ page language="java" import="java.util.*" pageEncodin
js 分页 ViewUI json css