利用javascript做的页内(详细页)搜索功能并将结果高亮突出显示 -- [页面特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

利用javascript做的页内(详细页)搜索功能并将结果高亮突出显示

深山行者个人网站 2011/1/28 9:21:05 深山行者字体:大中小浏览 21101

利用javascript做的页内(详细页)搜索功能并将结果高亮突出显示

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META name="Author" content="Sheneyan" />
<script type="text/javascript">
function encode(s){
  return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\$\^])/g,"\\$1");
}
function decode(s){
  return s.replace(/\$[\\\.\*\[\]\($\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
  if (s.length==0){
    alert('搜索关键词未填写！');
    return false;
  }
  s=encode(s);
  var obj=document.getElementsByTagName("body")[0];
  var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
  obj.innerHTML=t;
  var cnt=loopSearch(s,obj);
  t=obj.innerHTML
  var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
  t=t.replace(r,"<span class='highlight'>$1</span>");
  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;
}
</script>
<style type="text/css">
.highlight{background:green;font-weight:bold;color:white;}
</style>
</head>
<body>
<form onsubmit="highlight(this.s.value);return false;">
<p><input name="s" id="s" title="搜索内容："/><input type="submit" value="搜索"/></p>
</form>
<div id="content">深山工作室是一支专业网站建设团队，成立于2006年10月。专业为各类企事业单位以及个人等提供各类网站建设以及网页设计服务，并树立了良好的口碑，积累了丰富的网站建设相关经验，我们的专业水准亦得到行业内外的广泛认可。服务项目包括连云港网站建设、网页设计、广告设计、平面设计、网站SEO优化、网站推广、域名注册、虚拟主机等。
  <p>我们凭借多年对互联网技术的深入学习、钻研研究，对中国互联网的现状和发展趋势的把握，以及在网站建设、推广服务方面的成熟经验，已经形成了自己独到的管理方式，保证每个项目能够得以顺利完成，并能够在最大程度上保障为客户提供优秀的作品，完善的售前、售后服务！</p>
  <div></div>
我们为您提供优质的网站建设、完善的服务、一流的设计和全面的解决方案。全面满足大中小企业用户的需求，让客户在信息时代稳握无限商机。令客户满意是我们工作的目标。我们所做的一切就是依法最大限度地、最好地维护客户的合法权益，让客户满意。</div>
</body>
</html>

前一页:javascript 表单(文本框)触发鼠标事件大全

后一页:javascript编写的网页版的打字测试程序

相关阅读: 实现windows关机效果代码; DIV+CSS之自动换行; 曲阜中侨国际旅行社有限公司; web2.0 div+css 设计中一些标准化学习指南; asp导出内容到excel表并自定义命名后下载（非打开）; javascript自动获取Tags关键字; 关于网页里面的DOCTYPE见解; 兼容ie和火狐ff的透明度设置

共有0条关于《利用javascript做的页内(详细页)搜索功能并将结果高亮突出显示》的评论: 发表评论

正在加载评论......

返回顶部发表评论

呢称:
表情:
内容:	评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码:

网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery下拉到某个固定位置然后某些元素发生改变样式状态; canvas绘制的文字如何换行; 兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）; js兼容多个浏览器右下角漂浮广告; 兼容ie6+和火狐的禁止右键; 做在线客服时，聊天窗口的div滚动条始终在底部

更多>>最新添加文章: 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗; aliyun阿里云续费域名优惠口令(注册、续费都可以使用); windows7环境下安装配置jdk; python对微信操作要用到这两个库wxpy与itchat; ASP中Utf-8与Gb2312编码转换乱码问题的解决方法页面编码声明; DW设置之后更好用 DreamweaverCS编辑GB2312与UTF-8文件在代码视图中点击鼠标错位问题的解决办法

更多>>随机抽取信息: 区分IE6,IE7和firefox的CSS hack; 深山旅行社管理系统二次开发是怎么收费？; 七个受用一生的心理寓言; 深山行者留言系统V2.2 (简称留言板V2.2); 连云港电子杂志网站; 有利于搜索引擎的一些常用的CSS命名规则

更多标签热门标签

奋斗 dl 网易调色板 innerHTML 颜色倒计时多选遍历生成器模仿加密初级网页制作下载标语重复上下左右网站调色器 option 分辨率标签 Request 左右类别圆角 font-size 许愿墙 mssql 缩小界面文章 ajax outerHTML 创业弹出 web 2.0 变化例子服务器验证码 shift tags 首字母滑轮右键 eof 优化上一页