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 EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
js返回顶部实例分享
Dec 21 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
Javascript 解构赋值详情
Nov 17 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
详解vue axios二次封装
2018/07/22 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
python进行两个表格对比的方法
2018/06/27 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
用Python写一个for循环的例子
2016/07/19 面试题
外贸业务员岗位职责
2013/11/24 职场文书
车贷收入证明范本
2014/01/09 职场文书
会计人员岗位职责
2014/03/19 职场文书
小学生作文评语大全
2014/04/21 职场文书
大学生工作求职信
2014/06/23 职场文书
2014年体育部工作总结
2014/11/13 职场文书
工会经费申请报告
2015/05/15 职场文书
python中subplot大小的设置步骤
2021/06/28 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
关于使用Redisson订阅数问题
2022/01/18 Redis
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python