<!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 分页问题的更多相关文章

  1. js分页小结

     今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

  2. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  3. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  4. 一个重构的js分页类

    // JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...

  5. 面向对象版js分页

    基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

  6. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  7. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  8. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  9. JS分页条插件

    目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...

  10. js分页实例

    js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...

随机推荐

  1. hdu 4685(强连通分量+二分图)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4685 题意:n个王子和m个公主,王子只能和他喜欢的公主结婚,公主可以和所有的王子结婚,输出所有王子可能 ...

  2. super 使用以及原理

    用super也很久了,但是一直没有关注过他的原理.最近开始越来越多关注python更底层的实现和奇技淫巧.看到该方法越发使用得多所以也研究了一波 平时单继承可能是我们遇到最多的情况.无非就是类似情况. ...

  3. 如何禁止复制电脑文件到U盘、禁止U盘拷贝文件

    在公司局域网中,有时候我们处于保护电脑文件安全和商业机密的需要,会禁止局域网电脑使用U盘.禁用USB存储设备:或者禁止通过U盘复制电脑文件.禁止U盘拷贝公司电脑文件.那么,怎样实现呢?本文提供两种方法 ...

  4. File操作

    对文件进行操作(只操作小文件) bool Exists(string path) 判断文件是否存在 FileStream Create(string path) 创建文件 void Move(stri ...

  5. BZOJ3524[Poi2014]Couriers——主席树

    题目描述 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. 输入 第一行 ...

  6. MT【9】绝对值二次函数

    解答: 评:容易用绝对值不等式证明当$x\in[1,5]$时$|x^2+px+q|\ge2$

  7. 完全卸载迈克菲Mcafee的工具

    http://yunpan.cn/cZT4vGMMbGVns  访问密码 d257

  8. C代码快速构建框架

    #include "stdio.h" typedef char int8_t; typedef short int16_t; typedef int int32_t; typede ...

  9. 洛谷 P1337 [JSOI2004]平衡点 / 吊打XXX 解题报告

    P1337 [JSOI2004]平衡点 / 吊打XXX 题目描述 有 \(n\) 个重物,每个重物系在一条足够长的绳子上.每条绳子自上而下穿过桌面上的洞,然后系在一起.\(X\)处就是公共的绳结.假设 ...

  10. luogu1514 [NOIp2010]引水入城 (bfs+记忆化搜索)

    我们先bfs一下看看是否能到最底下的所有点 如果不能的话,直接把不能到的那几个数一数就行了 如果能的话: 可以发现(并不可以)某格能到达的最底下的格子一定是一个连续的区间 (因为如果不连续的话,我们先 ...