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 相关文章推荐
javascript操作cookie_获取与修改代码
May 21 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
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实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
php新建文件的方法实例
2019/09/26 PHP
JS命名空间的另一种实现
2013/08/09 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
Vue 全局loading组件实例详解
2018/05/29 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python多线程并发实例及其优化
2019/06/27 Python
python安装本地whl的实例步骤
2019/10/12 Python
python装饰器使用实例详解
2019/12/14 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
个性大学生自我评价
2013/12/04 职场文书
年会活动策划方案
2014/01/23 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
责任心演讲稿
2014/05/14 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
python分分钟绘制精美地图海报
2022/02/15 Python
正则表达式拆分url实例代码
2022/02/24 Java/Android