模拟浏览器的查找功能(Ctrl+F)，同时兼容IE和Chrome

通常在做前端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);
		}
	}