宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-09-03

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

!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] '[sS]*?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脚本语言程序设计有所帮助。

更多资讯
游戏推荐
更多+