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 jquery验证银行卡号信息正则学习
Jan 21 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
vue实现点击按钮下载文件功能
Oct 11 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/27 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python3实现名片管理系统
2020/11/29 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
法务专员岗位职责
2014/01/02 职场文书
大学生创业事迹材料
2014/12/30 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS