javascript 查找文本并高亮显示(改进版)---增加了提示跟踪和页面滑动功能
这个demo是在之前的基础上增加了提示跟踪和野蛮滑动的功能。
代码如下：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" /> <title></title> <style> .highlight{ background-color: yellow; } .current{ background-color:orange; } </style> </head> <body> <input id="search" type="search"> <input id="searchbtn" type="button" value="search"> <input id="test" type="button" value="测试"> <div id="pretime"> 西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路、西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路西丰、五女山、雨格、离堆公园、迎宾路、五女山、雨格、离堆公园、迎宾路 </div> <script> var spreText=""; var scurIndex = 0; var originalText = document.getElementById("pretime").innerHTML; String.prototype.Trim = function() {//去空格 return this.replace(/\s/gi,"") } function searchTarget(searchtext){//查找处理 if(searchtext != spreText){//新文本查找 scurIndex = 0;//重置提示索引 clearHighlight();//清除高亮显示 if(check(searchtext)){//目标文本存在，可进行下一步处理 Highlight(searchtext);//高亮显示查找到的目标文本 current(scurIndex,searchtext);//当前提示高亮显示 scurIndex++;//为下一个提示的索引 spreText = searchtext;//记录最新搜索文本，为下次搜索作准备 } } else{//搜索内容没变，则需要进行提示高亮跟踪 if(scurIndex < tagetCount(searchtext)){ current(scurIndex,searchtext);//添加当前提示跟踪 move();//页面滑动，使最新的提示跟踪处于可见页面中 scurIndex++;//下一个提示跟踪的索引 spreText = searchtext;//记录最新搜索文本，为下次搜索作准备 } } } function tagetCount(searchtext){//返回匹配次数 var reg = new RegExp(searchtext,"g"); return originalText.match(reg).length; } function check(searchtext){//检查是否有目标文本存在 var reg = new RegExp(searchtext,"g"); var content = document.getElementById("pretime").innerHTML; if(!reg.test(content)){ return false; } else{ return true; } } function Highlight(searchtext){//高亮显示目标文本 var reg = new RegExp(searchtext,"g"); var prehtml = document.getElementById("pretime").innerHTML; var newinner = prehtml.replace(reg,'<span class="highlight">'+searchtext+'</span>'); document.getElementById("pretime").innerHTML = newinner; } function clearHighlight(){//清除高亮状态 document.getElementById("pretime").innerHTML = originalText; } function current(index,text){//当前提示高亮着色 getHighlight()[index].innerHTML = '<span class="current">'+text+'</span>'; } function getCurrentHl(){ return document.getElementsByClassName("current"); } function getHighlight(){//获取高亮文本对象，用一个数组存储起来 var pretime = document.getElementById("pretime"); var highlight = pretime.getElementsByClassName("highlight"); return highlight; } function move(){//页面滑动 var windowHeight = window.innerHeight;//获取页面高度，即浏览器内页面的高度而非body高度 var searchtagetHeight = getCurrentHl()[getCurrentHl().length -1].offsetTop;//获取当前提示距离顶部的高度 var dis = windowHeight-searchtagetHeight;//计算距离判断是否不在可见范围内 if(dis < 0){ document.body.scrollTop += 30; } } function currentHLtoHL(searchtext){//清除当前提示跟踪，恢复高亮显示 var currentHL = getCurrentHl(); if(getCurrentHl().length > 0 && getCurrentHl()){ for(var i = 0;i < currentHL.length; i++){ currentHL[i].innerHTML = '<span class="current">'+searchtext+'</span>'; console.log(currentHL); } } } window.onload = function(){ document.getElementById("searchbtn").onclick = function(){ var searchtext = document.getElementById("search").value.Trim();//查找目标,其中Trim方法是过滤掉字符串中的空格 searchTarget(searchtext); } document.getElementById("test").onclick = function(){ var searchtext = document.getElementById("search").value.Trim(); currentHLtoHL(searchtext); } } </script> </body> </html>
效果如下：
