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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
js实现本地时间同步功能
Aug 26 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php将日期格式转换成xx天前的格式
2015/04/16 PHP
php中动态变量用法实例
2015/06/10 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python模拟表单提交登录图书馆
2018/04/27 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
国际贸易实训报告
2014/11/05 职场文书
整改报告怎么写
2014/11/06 职场文书
2015年商场工作总结
2015/04/27 职场文书
刑事辩护词范文
2015/05/21 职场文书
珍爱生命主题班会
2015/08/13 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫