通常在做前端Web界面时,经常需要用js模拟浏览器的查找功能。下面介绍下IE和Chrome浏览器中如何用js模拟该功能。
一、IE浏览器
在IE浏览器中我们需要用到TextRange对象,该对象主要用来在IE浏览器中查找文本。
如何创建该对象呢?
通常如果是在整个页面查找,只需调用方法document.body.createTextRange()即可。而如何是要在某一个对象内查找,例如:textArea,则需要调用docuemnt.getElementById('textAreaId').createTextRange()即可。
对象TextRange有两个比较重要的概念就是开始位置和结束位置,当我们创建完TextRange对象后,开始位置默认为整个查找域的起始位置,结束位置默认为整个查找域的结束位置。拿textArea举例来说就是整个textArea的开头和结尾。
当我们创建某个TextRange对象后,如何查找字符串呢?
我们需要用到TextRange对象的findText()方法,当我们调用查找方法后,该方法会不断的向下查找我们要查询的字符串,且开始位置和结束位置默认为当前查找到的字符串所在的开始位置和结束位置。当下一次查找逻辑运行时,会从当前的开头位置开始查找。
如何让浏览器选中我们查找到的字符串呢?
调用TextRange对象select()方法即可
当搜索的内容过多时,当前查找到的字符串可能不在可视范围内,如何让浏览器自动定位?
调用TextRange对象的scrollIntoView()方法可以滚动屏幕到合适位置
二、谷歌浏览器
谷歌浏览器中比较简单,只需要简单的调用window下的find方法即可。但是需要注意的是,如果需要循环查找,则需要多设置两个参数,如下所示:
window.find(searchValue,false,true);
三、完整实例代码如下:
//在整个文本中查找第几个,从0开始
var nextIndex = 0;
//上一次需要查找的字符串
var searchValue = '';
function findInPage(targetEle,searchText) {
//判断搜索字符是否为空
if (!searchText){
alert('搜索字符串为空');
}
//判断搜索条件是否已经改变
if(searchText && searchText != searchValue && nextIndex > 0){
searchValue = searchText;
nextIndex = 0;
}else{
searchValue = searchText;
}
if (document.all) {
txt = targetEle.createTextRange();
//搜索str
var found = '';
//查找第nextIndex个的字符串。之所以要用循环,是因为TextRange对象每次都是新生成的,所以查找初始位置每次都会还原。那么要查找第n次出现的字符串,就需要调用findText()方法多次,且每次查找都要重新设置开始位置和结束位置。
for (i = 0; i <= nextIndex && (found = txt.findText(searchValue))==true; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
//选中本次查找的字符串
if (found) {
//这里设置为-1,表示为倒序查找。之所以要这样做,是因为此时我们已经查找到了第nextIndex出现的字符串,那么此时如果设置为倒序查找,且将开始位置设置为末尾,那么此时调用findText()方法查找,则会刚好查到我们上一次查到的字符串
txt.moveStart("character", -1);
txt.findText(searchValue);
txt.select();
//滚动屏幕到合适位置
txt.scrollIntoView();
nextIndex++;
}else{
//循环查找
if (nextIndex > 0) {
nextIndex = 0;
findInPage(searchValue);
}
}
}else{
//谷歌循环查找
window.find(searchValue,false,true);
}
}
分享到:
相关推荐
js禁止查看源文件屏蔽Ctrl+u_s、F12、右键等兼容IE火狐chrome.zip
枫树浏览器专门把网银等一些不支持chrome模式的网站添加为IE列表,这样打开这些网址的时候就会自动切换为IE模式来打开。用户也可根据 自己的需要添加其他网站为IE列表。 ●隐私保护 有三种方法: 第一种是在浏览...
div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf
springboot+webuploader 实现大文件切片上传,兼容IE8+,chrome等浏览器,可运行
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
这次在项目中遇到了一个要做一个搜索功能,因为项目是vue的,而且是在手机端,所以对这个搜索功能的实现和能做到什么样子都没有底,在网上研究了一会,发现大家的解决方法都各有特色,有引入第三方包的,有遍历的,...
javascript实现ctrl+enter键提交表单并且兼容ie和ff以及google浏览器(Chrome)、苹果浏览器(Safari)、360极速浏览器(ie和火狐)
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=>上传 在这个操作...
JS日期选择器(兼容IE,FireFox,Oprea,chrome等主流浏览器)
jsencrypt 兼容IE8,Chrome,FF,包括exports.default,Object.defineProperty不兼容问题处理等。
超好用的js操作Excel实现数据导入导出JS包。只需引入JS包即可完成功能开发。压缩包中有Demo,参照编写即可。
IE和Chrome浏览器下怎么使新浪微博v6恢复原版.docx
textarea 自适应大小 兼容Chrome ie等浏览器,自动调整大小
兼容ie,firfox,chrome的页面广告随机飘动效果.效果非常好。
Infinity新标签页是一款谷歌浏览器中非常实用、极简洁的Chrome扩展程序,使用该插件可以重新定义Chrome的新标签页,让Chrome浏览器实现添加10+n个快捷方式,可以修改各种布局,非常棒
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome.docx
PC端Chrome浏览器扩展程序。用于模拟伪装成手机浏览器,实现从PC浏览器访问只能使用手机浏览器限制的网站。