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判断元素是否隐藏的方法
Jun 09 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
jquery实现页面加载效果
Feb 21 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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/01/15 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python实现感知器算法详解
2017/12/19 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python随机生成库faker库api实例详解
2019/11/28 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
在keras里实现自定义上采样层
2020/06/28 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
互动出版网:专业书籍
2017/03/21 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
财务部副经理岗位职责
2014/03/14 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书