js 实现高亮
最近在做一个平台,搜索关键字,展示包含该关键字的源码文件列表,点击进入源码后要求高亮关键字,用js 实现了关键字高亮,参考源码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UFT-8"> <title>Untitled Document</title> <script> //高亮显示搜索到的关键字 function HeightLight(Keyword) { //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange(); Found = TextRange.findText(Keyword); if (Found) { Count++; } while (Found && Count > 0) { TextRange.pasteHTML('<span style="background:yellow">' + Keyword + '</span>'); //将滚动条定位到第一次查到的视口范围内 if(Count==1) { TextRange.scrollIntoView(); } //继续查找 Found = TextRange.findText(Keyword); if (!Found) { Count = 0; } else { Count++; } } } </script> </head> <body onload="Show();"><script>function Show(){HeightLight('window'); } </script> <h1>page</h1> <h1>page 系统</h1> <h1>page 系统</h1> <h1>page</h1> <h1>page</h1> <h1>page 系统</h1> <h1>page window系统</h1> <h1>page</h1> </body></html>