<!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. 修改VCL源码实现自定义输入对话框

    来自:https://yq.aliyun.com/wenji/88428 通过修改VCL源码实现自定义输入对话框 在BCB中有两个函数可以实现输入对话框:InputBox和InputQuery,其实I ...

  2. CentOS常用包安装

    安装rz和sz命令: yum install lrzsz 安装unzip:yum install unzip

  3. BZOJ4891 TJOI2017龙舟（Polllard-Rho）

    对给定模数分解质因数后约分即可.依然常数巨大过不了. #include<iostream> #include<cstdio> #include<cmath> #in ...

  4. pip download 只下载不安装命令的使用方法

    比如下载 django 1.8.11版本和simplejson 3.14.0版本的包 那么就将所需的包写入  requirement.txt 那么我的requirement.txt内容就是: djan ...

  5. Chinese Postman Problem Aizu - DPL_2_B（无向图中国邮路问题）

    题意: 带权无向图上的中国邮路问题:一名邮递员需要经过每条边至少一次,最后回到出发点,一条边多次经过权值要累加,问最小总权值是多少.(2 <= N <= 15, 1 <= M < ...

  6. git上传到码云

    touch README.md git init git add README.md git add "你的文件" git commit -m "first commit ...

  7. K8s核心概念详解

    kubernetes(通常简称为K8S),是一个用于管理在容器中运行的应用的容器编排工具. Kubernetes不仅有你所需要的用来支持复杂容器应用的所有东西,它还是市面上最方便开发和运维的框架. K ...

  8. 单片机I/O口的结构的详解

    1.什么是源型 漏型?什么是上拉电阻?下拉电阻?什么是 线驱动输出 集电极开路输出,推挽式输出? 我们先来说说集电极开路输出的结构.集电极开路输出的结构如图1所示,右边的那个三极管集电极什么都不接,所 ...

  9. 并发容器——ConcurrentHashMap

    ConcurreentHashMap的实现原理与使用 ConcurrentHashMap是线程安全且高效的HashMap. 为什么要使用ConcurrentHashMap 在并发编程中使用HashMa ...

  10. 【loj3054】【hnoi2019】鱼

    题目 描述 ​ 难以描述.......慢慢看..: ​ https://loj.ac/problem/3054 范围 ​ $6 \le n \le 1000  ,  1 \le |x| , |y| \ ...