在指定的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 }