<!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. flask客户端测试使用设置cookie参数

    今天在对flask客户端进行测试,然后看到我们服务器端用请求前钩子写了这样的代码 @app.before_requestdef before_request(): session = request. ...

  2. html web服务器

    web服务器可以发布网站,从而使得网站可以被全世界访问: 在自己服务器上托管自己的网站的要求: 硬件搭建:强大的服务器硬件,保证24小时高速连接, 软件搭建:服务器授权比客户端授权更贵: 人工费:环境 ...

  3. obj.attr = 5 == obj._dict_["attr"] = 5，调用super相当于调用父类方法进行重新构造

  4. 国产首款5G手机抢先亮相：如此给力的说！

    5G网络是接下来移动互联网发展的主旋律,各家都在努力跟进,目前最积极的当属手机厂商,而2019年我们就能看到多款5G手机降临了. 在11月27日的未来信息通信技术国际研讨会上,vivo展示了他们正在研 ...

  5. C# 反射机制以及方法

    目录: 一. 反射的主要特性 1.反射中一个非常重要的类型就是 Type 1)当没有对象的时候使用这种方式来获取某个类型的Type 2)当已经获得对象后通过对象的GetType()方法来获取指定对象的 ...

  6. pdo连接的时候设置字符编码是这样的

    $pdo = new \PDO(..,..,..) $pdo->query('SET NAMES utf8mb4'); $pdo->exex('sql....');

  7. Java创建文件

    public class FileTest { public static void main(String[] args) throws IOException { File file = new ...

  8. 批量修改SharePoint2013 备用语言

    cls [System.Reflection.Assembly]::LoadWithPartialName("Microsoft.SharePoint") foreach ($we ...

  9. DataFrame 数据去重

    df.head() >>> Price Seqno Symbol time 0 1623.0 0.0 APPL 1473411962 1 1623.0 0.0 APPL 147341 ...

  10. 【POJ1961】最短周期串/最大周期 kmp

    引理:\(s[1,i]\) 具有长度为 \(len\) 的循环节的充要条件是:\(len\ |\ i,s[1,i-len]=s[len+1,i]\). 代码如下 #include <cstdio ...