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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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操作数组相关函数
2011/02/03 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
如何实现动态删除javascript函数
2007/05/27 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jQuery使用方法
2017/02/04 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
python如何实现内容写在图片上
2018/03/23 Python
python生成ppt的方法
2018/06/07 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
校运会口号
2014/06/18 职场文书
2014企业年终工作总结
2014/12/23 职场文书
给病人的慰问信
2015/03/23 职场文书
小学家长意见怎么写
2015/06/03 职场文书
公证书
2019/04/17 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Python echarts实现数据可视化实例详解
2022/03/03 Python
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android