zoukankan      html  css  js  c++  java
  • 在指定的div中搜索内容,并滚动显示到当前搜索到的内容处

    我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位。
    先是查找页面中的内容,然后将找到的内容创建textRange,然后找到内容的上层容器对象,利用JQuery的功能,将这个上层窗口对象位置和div位置运算一下后,把div的滚动条滚动到这个容器位置。

     1                 //在指定的div对象中搜索内容,并定位滚动div的滚动条到搜索
     2                 //在整个文本中查找第几个,从0开始  
     3                 var nextIndex = 0;
     4                 //上一次需要查找的字符串  
     5                 var searchValue = '';
     6 
     7                 function findInPage(searchText) { //在指定的div对象中搜索内容,并定位滚动div的滚动条到搜索内容位置显示  
     8                     //判断搜索字符是否为空
     9                     if (!searchText) {
    10                         alert('请输入要搜索的内容');
    11                         return;
    12                     }
    13                     var textvalue = searchText;
    14                     var divObj = document.getElementById("div");
    15 
    16                     //判断搜索条件是否已经改变  
    17                     if (searchText && searchText != searchValue && nextIndex > 0) {
    18                         searchValue = searchText;
    19                         nextIndex = 0;
    20                     } else {
    21                         searchValue = searchText;
    22                     }
    23 
    24                     if (document.all) {
    25                         txt = document.body.createTextRange();
    26                         //搜索str  
    27                         var found = '';
    28                         //查找第nextIndex个的字符串。之所以要用循环,是因为TextRange对象每次都是新生成的,所以查找初始位置每次都会还原。那么要查找第n次出现的字符串,就需要调用findText()方法多次,且每次查找都要重新设置开始位置和结束位置。  
    29                         for (i = 0; i <= nextIndex && (found = txt.findText(searchValue)) == true; i++) {
    30                             txt.moveStart("character", 1);
    31                             txt.moveEnd("textedit");
    32                         }
    33                         //选中本次查找的字符串  
    34                         if (found) {
    35                             //这里设置为-1,表示为倒序查找。之所以要这样做,是因为此时我们已经查找到了第nextIndex出现的字符串,那么此时如果设置为倒序查找,且将开始位置设置为末尾,那么此时调用findText()方法查找,则会刚好查到我们上一次查到的字符串  
    36                             txt.moveStart("character", -1);
    37                             txt.findText(searchValue);
    38                             txt.select();
    39                             //滚动屏幕到合适位置  
    40                             //txt.scrollIntoView(false);  
    41                             var container = $(divObj);
    42                             var rng = document.selection.createRange();
    43                             var scrollTo = $(rng.parentElement());
    44                             //var scrollTo = $('#bfbf');  
    45 
    46                             container.scrollTop(
    47                 scrollTo.offset().top - container.offset().top + container.scrollTop()
    48             );
    49                             nextIndex++;
    50                         } else {
    51                             //循环查找  
    52                             if (nextIndex > 0) {
    53                                 nextIndex = 0;
    54                                 findInPage(divObj, searchValue);
    55                             } else {
    56                                 alert('没有搜索到“' + textvalue + '');
    57                             }
    58                         }
    59                     } else {
    60                         //循环查找  
    61                         window.find(searchValue, false, true);
    62                     }
    63                 }
  • 相关阅读:
    PIE SDK介绍
    PIE软件介绍
    PIE SDK与Python结合说明文档
    转载博客(Django2.0集成xadmin管理后台遇到的错误)
    python+django学习二
    python+django学习一
    HTML练习二--动态加载轮播图片
    HTML练习一
    LeetCode 999. 车的可用捕获量
    LeetCode 892. 三维形体的表面积
  • 原文地址:https://www.cnblogs.com/a7265813/p/3520833.html
Copyright © 2011-2022 走看看