javascript实现页面内关键词高亮显示代码


Posted in Javascript onApril 03, 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=utf-8" /> 
<title>关键字高亮显示</title> 
</head> 
<body> 
<div class="result" id="textbox"> 
<p>百度(Nasdaq简称:BIDU)是全球最大的中文搜索引擎,2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的</p> 
<p>信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p> 
</div> 
<script> 
function highlight(idVal, keyword) { 
var textbox = document.getElementById(idVal); 
if ("" == keyword) return; 
//获取所有文字内容 
var temp = textbox.innerHTML; 
console.log(temp); 
var htmlReg = new RegExp("\<.*?\>", "i"); 
var arr = new Array(); //替换HTML标签 
for (var i = 0; true; i++) { 
//匹配html标签 
var tag = htmlReg.exec(temp); 
if (tag) { 
arr[i] = tag; 
} else { 
break; 
} 
temp = temp.replace(tag, "{[(" + i + ")]}"); 
} 

// 讲关键词拆分并入数组 
words = decodeURIComponent(keyword.replace(/\,/g, ' ')).split(/\s+/); 
//替换关键字 
for (w = 0; w < words.length; w++) { 
// 匹配关键词,保留关键词中可以出现的特殊字符 
var r = new RegExp("(" + words[w].replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig"); 
temp = temp.replace(r, "<b style='color:Red;'>$1</b>"); 
} 
//恢复HTML标签 
for (var i = 0; i < arr.length; i++) { 
temp = temp.replace("{[(" + i + ")]}", arr[i]); 
} 
textbox.innerHTML = temp; 
} 
highlight("textbox","百度,李彦宏"); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 #Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 #Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 #Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 #Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 #Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
destoon之一键登录设置
2014/06/21 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php编程每天必学之验证码
2016/03/03 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
python文件写入实例分析
2015/04/08 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python 获取图片分辨率的方法
2019/01/08 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书