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

                  //在指定的div对象中搜索内容,并定位滚动div的滚动条到搜索
//在整个文本中查找第几个,从0开始
var nextIndex = ;
//上一次需要查找的字符串
var searchValue = ''; function findInPage(searchText) { //在指定的div对象中搜索内容,并定位滚动div的滚动条到搜索内容位置显示
//判断搜索字符是否为空
if (!searchText) {
alert('请输入要搜索的内容');
return;
}
var textvalue = searchText;
var divObj = document.getElementById("div"); //判断搜索条件是否已经改变
if (searchText && searchText != searchValue && nextIndex > ) {
searchValue = searchText;
nextIndex = ;
} else {
searchValue = searchText;
} if (document.all) {
txt = document.body.createTextRange();
//搜索str
var found = '';
//查找第nextIndex个的字符串。之所以要用循环,是因为TextRange对象每次都是新生成的,所以查找初始位置每次都会还原。那么要查找第n次出现的字符串,就需要调用findText()方法多次,且每次查找都要重新设置开始位置和结束位置。
for (i = ; i <= nextIndex && (found = txt.findText(searchValue)) == true; i++) {
txt.moveStart("character", );
txt.moveEnd("textedit");
}
//选中本次查找的字符串
if (found) {
//这里设置为-1,表示为倒序查找。之所以要这样做,是因为此时我们已经查找到了第nextIndex出现的字符串,那么此时如果设置为倒序查找,且将开始位置设置为末尾,那么此时调用findText()方法查找,则会刚好查到我们上一次查到的字符串
txt.moveStart("character", -);
txt.findText(searchValue);
txt.select();
//滚动屏幕到合适位置
//txt.scrollIntoView(false);
var container = $(divObj);
var rng = document.selection.createRange();
var scrollTo = $(rng.parentElement());
//var scrollTo = $('#bfbf'); container.scrollTop(
scrollTo.offset().top - container.offset().top + container.scrollTop()
);
nextIndex++;
} else {
//循环查找
if (nextIndex > ) {
nextIndex = ;
findInPage(divObj, searchValue);
} else {
alert('没有搜索到“' + textvalue + '”');
}
}
} else {
//循环查找
window.find(searchValue, false, true);
}
}

在指定的div中搜索内容,并滚动显示到当前搜索到的内容处的更多相关文章

  1. IE8下div中2个button仅仅显示一个

    IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" &g ...

  2. Div内部的内容超出部分显示省略号(仅仅只有一行内容)

    效果如下:

  3. html如何让label在div中的垂直方向居中显示?

    设置label的行高 line-height 和div的高度一致即可.

  4. listView获取item的Edit内容,listView中的edit内容在滚动时自动赋值了前面的内容

    Today I am going to explain how to create a ListView with EditText and why will we need a TextWatche ...

  5. vc 在edit控件中动态插入数据滚动显示

    内存从网上论坛摘抄整理 思路:给控件设置多行属性,设置垂直滚动条,Auto Vscroll设置为true,放入文本后把插入点设置到末尾 pEdit->LineScroll(pEdit->G ...

  6. bootstrap表格固定表头,表格内容滚动条滚动显示

    直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. div中粘贴图片并上传服务器 div中拖拽图片文件并上传服务器

    应用简介:此文主要是描述如何在前端div中直接ctrl+v 粘贴图片,并上传到服务器,包括拖拽图片文件到div中 应用场景描述:用QQ或者其它切图软件截图,在指定的div中ctrl+v 粘贴并显示,点 ...

  8. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  9. javascript怎么获取指定url网页中的内容

    javascript怎么获取指定url网页中的内容 一.总结 一句话总结:推荐jquery中ajax,简单方便. 1.js能跨域操作么? javascript出于安全机制不允许跨域操作的. 二.用ph ...

随机推荐

  1. Amoeba for MySQL读写分离配置

    一.      安装和运行Amoeba 1. Amoeba for MySQL 架构: 2. 验证Java的安装Amoeba框架是基于Java SE1.5开发的,建议使用Java SE1.5以上的版本 ...

  2. Android深度探索--HAL与驱动开发----第九章读书笔记

    Google为Android加入HAL主要有如下的目的. 统一硬件的调用接口.由于HAL 有标准的调用接口,所以可以利用HAL屏蔽Linux 驱动复杂.不统一的接口. 解决了GPL版权问题.由于Lin ...

  3. Linux内核分析——理解进程调度时机跟踪分析进程调度与进程切换的过程

    20135125陈智威 +原创作品转载请注明出处 +<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验 ...

  4. SQL.集合转字符串

    场景:有个表,里面有NUM1,NUM2,NUM3,NUM4,我们打算把所有数据拼接成一个值. 在.net中使用的方法应该是两层for循环拼接起来,下面来介绍下sql中的方式 第一种方法,动态sql d ...

  5. iOS的触摸事件的用法以及和手势识别器的区别

    1.首先来介绍下触摸事件和手势识别器的利与弊 触摸事件和手势识别器二者之间有直接的关系 手势识别器是在触摸事件的基础上演变过来的 当我们用到触摸事件时 默认的uiview是没有什么效果的 只能自定义v ...

  6. MVC之路随记3--Html辅助方法

    概述:MVC中使用@Html.MethodName 来做很多Html的事情,简化了开发工程量,使用方便,并且易于理解 详细方法: 1.表单 <form action="/Home/Se ...

  7. Codeforces Round #376 (Div. 2)

    A 模拟 #include <cstdio> #include <cstring> int Ans; ]; inline ?x:-x;} inline int Min(int ...

  8. Valid Palindrome ---- LeetCode 125

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  9. redis 数据类型详解 以及 redis适用场景场合

    1.  MySql+Memcached架构的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都曾经使用过这样的架构,但随着业务数据量的 ...

  10. Jenkins - 持续集成环境搭建

    1. Jenkins 概述 Jenkins是一个开源的持续集成工具.持续集成主要功能是进行自动化的构建.自动化构建包括自动编译.发布和测试,从而尽快地发现集成错误,让团队能够更快的开发内聚的软件. 2 ...