在指定的div中搜索内容，并滚动显示到当前搜索到的内容处

#在指定的div中搜索内容，并滚动显示到当前搜索到的内容处| 来源: 网络整理| 查看: 265

我想要的是页面中有个带滚动条的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 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 }

【本文地址】

公司简介

联系我们