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

本文介绍了一个实用的JavaScript页内搜索代码,该代码能够高效地在网页内容中搜索关键词,并高亮显示匹配结果。通过遍历DOM节点,实现关键词查找并替换,为站内搜索提供便利。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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网页特效代码,点击运行按钮可查看效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值