js 分页问题

浏览数：31 / 时间：2015年06月09日
<!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>