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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
工厂门卫岗位职责范本
2014/04/04 职场文书
应用外语系自荐信
2014/06/26 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
工作证明英文模板
2014/10/21 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
先进典型事迹材料
2014/12/29 职场文书
长征观后感
2015/06/09 职场文书
感恩教育观后感
2015/06/17 职场文书
大学军训通讯稿
2015/07/18 职场文书
java泛型通配符详解
2021/07/25 Java/Android
MYSQL如何查看操作日志详解
2022/05/30 MySQL