html制作搜索页面代码,页内搜索功能源代码

编程知识 更新时间:2023-04-04 21:15:08

function encode(s){

return s.replace(/&/g,"&").replace(//g,">").replace(/([\.*[]()$^])/g,"\$1");

}

function decode(s){

return s.replace(/\([\.*[]()$^])/g,"$1").replace(/>/g,">").replace(/

}

function highlight(s){

if (s.length==0){

alert('搜索关键词未填写!');

return false;

}

s=encode(s);

var obj=document.getElementsByTagName("body")[0];

var t=obj.innerHTML.replace(/([^<>]*)/gi,"$1");

obj.innerHTML=t;

var cnt=loopSearch(s,obj);

t=obj.innerHTML

var r=/{searchHL}(({(?!/searchHL})|[^{])*){/searchHL}/g

t=t.replace(r,"$1");

obj.innerHTML=t;

alert("搜索到关键词"+cnt+"处")

}

function loopSearch(s,obj){

var cnt=0;

if (obj.nodeType==3){

cnt=replace(s,obj);

return cnt;

}

for (var i=0,c;c=obj.childNodes[i];i++){

if (!c.className||c.className!="highlight")

cnt+=loopSearch(s,c);

}

return cnt;

}

function replace(s,dest){

var r=new RegExp(s,"g");

var tm=null;

var t=dest.nodeValue;

var cnt=0;

if (tm=t.match(r)){

cnt=tm.length;

t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")

dest.nodeValue=t;

}

return cnt;

}

.highlight{background:green;font-weight:bold;color:white;}

一个页内搜索代码,功能很实用,站内搜索经常用到.

以下是HTML网页特效代码,点击运行按钮可查看效果

更多推荐

html制作搜索页面代码,页内搜索功能源代码

本文发布于:2023-04-04 21:15:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/8faac9fca5accc6e3470638add31a915.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:源代码   搜索功能   页面   代码   html

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!

  • 43563文章数
  • 14阅读数
  • 0评论数