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 相关文章推荐
HTML颜色选择器实现代码
Nov 23 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
浅谈webpack构建工具配置和常用插件总结
May 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue中created和mounted的区别浅析
2019/08/13 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
python实现图片转字符画
2021/02/19 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
车辆工程专业求职信
2014/06/14 职场文书
公司员工违纪检讨书
2015/05/05 职场文书