JS实现静态页面搜索并高亮显示功能完整示例

本文实例讲述了射流研究…实现静态页面搜索并高亮显示功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 ' title js搜索/title/head dyinput id=' key-word ' class=' key-word ' value='请输入搜索内容/button id='search-button '搜索/buttondiv id='content' p这是主体内容，有很多内容，很多很多啊啊啊……,比如1234abcd啊啊啊啊/pp这是主体内容，有很多内容，很多很多啊啊啊……,比如1234abcd啊啊啊啊/pp这是主体内容，有很多内容，很多很多啊啊啊……,比如1234abcd啊啊啊啊/pp这是主体内容，有很多内容，很多很多啊啊啊……,比如1234abcd啊啊d d啊啊/p/div脚本函数$(id){返回文档。getelementbyid(id)} var putWordsObj=$('关键字');putwordsobj。onfocus=function(){ if(this。值=='请输入搜索内容)this.value=} putwordsobj。onbulr=function(){ if(！this.value)this.value='请输入搜索内容；}//搜索$("搜索按钮")。onclick=function(){ var content=$(“content”).innerHTMLvar KeY=$('关键字')。价值；内容=search_do(内容，关键字)；$("内容")。innerHTML=内容；//警报(内容)}函数search_do(内容，关键字){ var KeyWordArr=Keyword。替换(/[\ s/g ' ').拆分("");var ref r(var n=0；n KeyWordArr . length n){//re=new RegExp('[\ S \ S]*？keyWordArr[n] '[\s\S]*？\S '，' gmi ')；re=new RegExp(' KeyWordArr[n]' '，' gmi ')；content=content.replace(re，' span style=' color : # 0f 0 background-color : # ff0 ' ' KeyWordarr[n]'/span ')；}返回内容；}/脚本/正文/html运行效果如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数据结构与算法技巧总结》 、 《JavaScript数学运算用法总结》 、 《JavaScript排序算法总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 及《JavaScript错误与调试技巧总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。